JQUERY - обеспечивает показ только одного идентификатора div определенного класса, когда пользователь нажимает на соответствующее изображение, а остальные настроены на скрытие - PullRequest
Новая
       4

JQUERY - обеспечивает показ только одного идентификатора div определенного класса, когда пользователь нажимает на соответствующее изображение, а остальные настроены на скрытие

2 голосов
/ 24 января 2010

У меня есть 10 изображений во флэш-карусели, настроенной для запуска команд jquery через документ XML

, т. Е.: 

<photo image="images/01.jpg" url="javascript:toggleDetail1()" target="_self">
<photo image="images/02.jpg" url="javascript:toggleDetail2()" target="_self">

etc...

, когда пользователь щелкает изображение, которое я хочу убедиться, чтоотображается только соответствующий div данного конкретного изображения, а остальные 9 скрыты.

я дал всем 10 div класс "toggleitem", и у каждого div есть свой собственный идентификатор ("detail1", "detail2",и т.д.) так что теперь мне нужно написать свой jquery, и я немного потерян.

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

<script type="text/javascript">

function toggleDetail1() {
$('#bookdetail1').show();}

function toggleDetail2() {
$('#bookdetail2').show();}

etc...

мне нужно использовать селектор .not (), оператор if иличто?я сбит с толку.

заранее спасибо за любую помощь по этому вопросу

Ответы [ 3 ]

0 голосов
/ 24 января 2010

на случай, если это поможет любому1 в будущем, Карим сказал мне сделать это: 

function toggleDetail1() {
$('.toggleitem').hide();
$('#bookdetail1').show(); }
0 голосов
/ 17 сентября 2016

Вот как я это сделаю: 

<photo image="images/02.jpg" data-detail="bookdetail1">

<div class="toggleitem" id="bookdetail1">
    <span class="cover"><img src="images/details/1/cover-1.jpg"</span>
    <span class="spread"><img src="images/details/1/spread-1.jpg"</span>
    <span class="blurb">text text text text text.</span>
</div>

Затем запустите это для всех элементов фото: 

$("photo").on("click", function(){
    var $this = $(this),
        detail = $this.data("detail"),
        $detail = $("#"+detail);
    // If you want to toggle the show/hide just use .toggle()
    if ($detail) {
        $detail.toggle();
    }
    // If you want to execute additional when you toggle:
    /*
        if ($detail.is(":visible")) {
            $detail.hide();
            // do more stuff when it's hidden
        } else {
            $detail.show();
            // do more stuff when it's shown
        }
    */
});
0 голосов
/ 24 января 2010

извините, если включить HTML: 

<div class="toggleitem" id="bookdetail1">
<span class="cover"><img src="images/details/1/cover-1.jpg"</span>
<span class="spread"><img src="images/details/1/spread-1.jpg"</span>
<span class="blurb">text text text text text.</span>
</div>
...