2013-05-02 3 views
2

Я пытаюсь включить то, что должно быть простой JQuery фрагмент в портфолио веб-сайт друга, чтобы заменить:replaceWith(); функция JQuery

<div class="content one"> 
<h3>Content Title</h3> 
<p>Body text.</p> 
</div> 

С:

<div class="content two"> 
<h3>Content Title</h3> 
<p>Body text.</p> 
</div> 

При наведении на отдельном сНу классе:

<div class="item two"><!--content two icon--> 
<img src="" alt="" /> 
</div> 

у меня есть эти отдельные классы <div class="item">, которые имеют значки в них. Я хочу иметь возможность навести курсор на класс значка и заменить класс <div class="content"> на другой, соответствующий значку <div class="item">.

Для JQ, я использую следующее:

<script type="text/javascript"> 
$('.item two').hover(function(){ 
$('.content one').replaceWith($('.content two')); 
}); 
</script> 

У меня есть каждый класс контента (кроме .content один), как display: none; я думаю, что нужно бросить в .show(); события внутри функции replaceWith(); , но даже если я удалю display: none; на классы, ничто не заменяет собой класс, который я пытаюсь заменить.

Я по-прежнему относительно новичок в JQuery и JavaScript в целом, поэтому, наверное, это просто глупо, что я не прав. Простите меня, если я не включу достаточную информацию, чтобы помочь вам разобраться в проблеме. Спасибо за помощь!

+0

Woot! Вы, ребята, рок! Это сразу исправило это. Я знал, что это было что-то глупое, просто мне не хватало :) – Dann

ответ

0

попробовать это:

$('.item.two').hover(function(){ 
    $('.content.one').replaceWith($('.content.two')); 
}); 
2

У вас есть два класса на одном элементе в обоих случаях, так что ваши селекторы должны быть:

.item.one 
.item.two 
.content.two 
.content.two