Замена элемента jQuery - PullRequest
       12

Замена элемента jQuery

0 голосов
/ 24 октября 2008

У меня есть 3 div, где по умолчанию виден только один, каждый из которых содержит информацию о продукте. Ниже этого divs находится список из 3 изображений, которые являются изображениями продуктов. Конечно, по умолчанию первый элемент списка выбран и имеет class="selected". Когда щелкает изображение другого продукта, class="selected" перемещается к этому элементу списка, и элемент над ним становится скрытым, и должен отображаться элемент, содержащий другую информацию о продукте.

Я искал повсюду плагин, который может делать то, что я хочу, все они каким-то образом ограничены, что мешает мне делать это.

Ответы [ 3 ]

2 голосов
/ 24 октября 2008

Рассмотрим следующий код:

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;

        $("#" + $(".selected").attr("desc")).addClass("hidden");
        $(".selected").removeClass("selected");

        $("#" + $(this).attr("desc")).removeClass("hidden");
        $(this).addClass("selected");

    });

</script>

Это должно быть довольно близко. Вам нужно определить отношения между вашими изображениями и элементами div ... поэтому я добавил атрибут 'desc' к изображениям. Дополнительный класс 'prodImg' на изображениях позволяет вам убедиться, что только эти изображения подключены для этого типа поведения входа и выхода.

1 голос
/ 24 октября 2008

Виджет Acordian имеет схожую функциональность. Если вы поместите изображения в заголовки, вы получите желаемый эффект.

Посмотрите на http://docs.jquery.com/UI/Accordion для получения дополнительной информации.

0 голосов
/ 10 августа 2009
<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

Надеюсь, это поможет вам!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...