функция slideToggle работает отдельно

Question

функция slideToggle работает отдельно

0

Моя проблема связана с jQuery и его функцией slideToogle(). Я пытаюсь использовать эту функцию более одного раза на одной странице, и я спрашиваю, возможно ли ее иметь один идентификатор div или класс, который будет в этой функции.

$(document).ready(function(){
          $("class or div").click(function(){
            $("class or div").slideToggle("fast");
          });
});

Моя цель состоит в том, чтобы иметь несколько div, и когда я нажимаю на них, они будут расширяться/закрываться SEPARETLY. Он отлично работает, в то время как у меня есть только один div. Когда я устанавливаю все свои divs в класс (скажем, класс первого div - class="class" и класс div, который должен перемещаться, - class="div"), когда я нажимаю на свой <div class="class"> <div class="div"> разворачивается каждый <div class="div">.

$(document).ready(function(){
          $(".class").click(function(){
            $(".div").slideToggle("fast");
          });
});

Я попытался обойти эту проблему, но мой (пока) рабочий код

$(document).ready(function(){
      $("#class1").click(function(){
        $("#div1").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class2").click(function(){
        $("#div2").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class3").click(function(){
        $("#div3").slideToggle("fast");
      });
    });

Действительно ли необходимо использовать много строк кода (особенно, когда Iam планирует иметь более 15 таких видов div)?

Спасибо за вашу помощь.

Мой HTML:

<img class="prace" src="images/kresby/lambo.jpg">
<div id="flip1"> 1. Lamborghini Gallardo Superleggera</div>
<div id="panel1">Lamborghini Gallardo Superleggera</div>

<img class="prace" src="images/kresby/corvette.jpg">
<div id="flip2">TOGGLE</div>
<div id="panel2">TEXT</div>

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3">TOGGLE</div>
<div id="panel3">TEXT</div>
.
.
.

Мой сценарий:

    $(document).ready(function(){
      $("#flip1").click(function(){
        $("#panel1").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#flip2").click(function(){
        $("#panel2").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#flip3").click(function(){
        $("#panel3").slideToggle("fast");
      });
    });

Мой CSS:

#flip1,#flip2,...{
    width: 80%;
    margin: 0 auto;
    padding:10px;
    text-align:center;
    background-color: #191919;
    border-radius:10px;
    margin-bottom: 5px;
}

#panel1,#panel2...{
    text-align: center;
    background: url("images/b.PNG"); ;
    display:none;
    padding: 50px;
    border-radius: 5px;
    border: 1px ridge #ffff66;
}

Toesmash 20 сен. 2013, в 09:21

Источник

Теги:

jquery

html

5 ответов

Ещё вопросы

The Dark Knight · Answer 1 · 2013-09-20T05-59-00.000Z

Я лично пойду на эффект зависания. Фактическая часть кода, которая переключает вещи, я буду держать их внутри функции, а затем использовать зависание для передачи идентификаторов.

JS:

$(document).ready(function(){
    function makeThemToggle(toggleID, nextDivID){
        $("#"+toggleID).click(function(){
            $("#"+nextDivID).slideToggle("fast");
        });
    }

    var nextDiv = '';

    $("#flip1").hover(function(){
        nextDiv = ($("#flip1").next().attr('id'));
        makeThemToggle('flip1',nextDiv);
    });

    $("#flip2").hover(function(){
        nextDiv = ($("#flip2").next().attr('id'));
        makeThemToggle('flip2',nextDiv);
    });

    $("#flip3").hover(function(){
        nextDiv = ($("#flip3").next().attr('id'));
        makeThemToggle('flip3',nextDiv);
    });

});

Рабочий скрипт JS: http://jsfiddle.net/QXbAZ/2/

Но будьте осторожны: таким образом, эффект переключения в сочетании с зависанием становится очень выраженным, и могут быть задействованы 2 или 3 экземпляра элемента.

EdenSource · Answer 2 · 2013-09-20T05-31-00.000Z

Вы также можете использовать each() как это, после добавления класса к каждому перевороту:

$(document).ready(function(){
    $(".flip").each(function(){
      $(this).click(function(){
        $(this).next().slideToggle("fast");
      });
    });
 });

скрипка

Deepak Mishra · Answer 3 · 2013-09-20T05-16-00.000Z

Вы должны использовать $ (this) внутри событий, чтобы показывать только тот элемент, который trigerred событие, а не все элементы с тем же классом.

Согласно вашей структуре HTML, вы также можете использовать next().

$(document).ready(function(){
  $("div[id*='flip']").click(function(){
    $(this).next().slideToggle();
  });
});

Было бы лучше, если бы вы использовали общий класс для всех div с id 'flip1', 'flip2' и т.д., Возможно, класс с именем flip.

Тогда вы можете просто использовать следующее:

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle();
  });
});

Arun P Johny · Answer 4 · 2013-09-20T05-08-00.000Z

Добавить классы flip и panel к элементам

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3" class="flip">TOGGLE</div>
<div id="panel3" class="panel">TEXT</div>

тогда

$('.flip').click(function(){
    $(this).next('.panel').toggle()
})

jotaen · Answer 5 · 2013-09-20T04-26-00.000Z

Если возможно, чтобы переместить второй <div> в первые, вы можете сделать это следующим образом:

<div class="flip">Headline 1
  <div class="sub">Desciption</div>
</div>

<div class="flip">Headline 2
  <div class="sub">Desciption</div>
</div>

Javascript:

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).children(".sub").slideToggle("fast");
  });
});