jQuery SlideToggle открывает все div с одинаковым идентификатором

0

Я здесь новый и очень любитель при кодировании. У меня проблема, с которой я боролся пару часов. У меня есть 2 div с одинаковым ID, и когда я нахожу его, скрипт jQuery разрешает div на обоих div. Я не могу объяснить это действительно хорошо, поэтому здесь я публикую сайт, на котором вы можете увидеть проблему и код. Спасибо за помощь

http://prdable.tym.sk/vegas

код страницы

echo "<div id='index' style='float:left'>";
echo "SEE D-TIME<br>";
echo "<span style='font-size:18px;'><i>&quoteverything that need to be seen&quot</i></span>";

echo "<p class='roller'>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. 
Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov 
a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, 
a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, 
ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, 
ktorý obsahoval verzie Lorem Ipsum.
</p>
</div>";

echo "<div id='index' style='float:left; margin-left:40px;'>";
echo "SEE N-TIME<br>";
echo "<span style='font-size:18px;'><i>&quotmiracles you only see at n-time&quot</i></span>";

echo "<p class='roller'>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. 
Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov 
a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, 
a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, 
ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, 
ktorý obsahoval verzie Lorem Ipsum.
</p>
</div>";

сценарий Jquery

echo "<script>";
echo "$(document).ready(function () {
  $('div#index').hover(function () {
    $('p.roller').stop(true,false).slideToggle(300); });});";
echo "</script>";
  • 0
    Я собирался положить это в другой файл. Что ты имеешь в виду? Я должен написать функцию для каждого идентификатора?
  • 0
    I have 2 divs with the same ID <- Вы не можете этого сделать.
Теги:

1 ответ

0

Я собрал быстрый пример, используя следующий метод, а не ближайший.

http://jsbin.com/petekagu/1/edit?html,css,js,output

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<script src="/jquery-1.10.2.js"></script>
<style>
  .index {
    padding: 10px;
    margin-top: 10px;
    cursor: default;
  }
  .d-time, .e-time {
    display: none;
    background-color: yellow;
  }
</style>
</head>
<body>
<div class="index"><b>See D Time</b></div>
<div class="d-time">d time some hidden content here </div>

<div class="index"><b>See E Time</b></div>
<div class="e-time">e time some hidden content here </div>
<script>
$( "div.index" )
.hover(function() {
  $( this )
    .next()
      .stop( true, true )
      .slideToggle();
});
</script>

Добро пожаловать. Во-первых, вы не должны указывать несколько элементов на странице, используя одно и то же значение ID. Вместо этого используйте класс для обозначения элементов div #index. Чтобы вызвать правильный элемент при наведении, используйте что-то вроде метода.closest.

http://api.jquery.com/closest/

Поделиться
  • 0
    Спасибо за ответ. Я проверил метод closest () и до сих пор удачи с ним. Теперь он применяется на странице, чтобы вы могли посмотреть, что он делает. prdable.tym.sk/vegas
  • 0
    Я только что обновил свой ответ примером, используя следующий метод. Надеюсь, это поможет вам немного больше.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню