Как выбрать тип селектора при использовании многих классов в JQuery? - PullRequest
Новая
       36

Как выбрать тип селектора при использовании многих классов в JQuery?

0 голосов
/ 27 марта 2012

Я пытаюсь создать страницу с несколькими пунктами.

Например:

  • Point1
  • Point2
  • Point3

У каждой из этих точек есть какой-то текст, который скрыт, пока мы не нажмем на точку, а затем она будет показана под ней.

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

Я использовал этот код: 

$(document).ready(function(){
$(".point").click(function(){
$(".explanation").slideToggle("fast");
});
});

Итак, есть идеи?

Большое спасибо.

Ответы [ 4 ]

1 голос
/ 27 марта 2012

Вам необходимо найти объект explanation, связанный с нажатой точкой.Вы можете получить точку щелчка в обработчике кликов, используя this.Вы не показывали HTML, поэтому мне придется составить пример, чтобы показать вам, как: 

<div class="point>
    other HTML here
    <div class="explanation">
        This is the explanation for this point.
    </div>
</div>

$(document).ready(function(){
    $(".point").click(function(){
        $(this).find(".explanation").slideToggle("fast");
    });
});

Если вы хотите получить более конкретный ответ, опубликуйте свой HTML, чтобы мы могли увидеть, как explanation объект связан с point объектом в вашем HTML.Это предполагает, что объяснение находится внутри точечного объекта.Если это брат, потребуется немного другой jQuery.

1 голос
/ 27 марта 2012 
$(document).ready(function(){
     $(this).click(function(){
      $(this).children(".explanation").slideToggle("fast");
    });
});
0 голосов
/ 03 апреля 2012

Это сработало :) Большое спасибо за вашу помощь Вот код на случай, если кому-то это понадобится:

Код HTML: 

    <h1 class="point">AAAA</h1>
    <div class="explanation">
    <h3>XXXXX</h3>
    <p>....</p>
    </div>

Код JQuery: 

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

Css: 

    div.explanation,h1.point
    {
      margin:0px;
      padding:5px;
      text-align:center;
      background:#488AC7;
      border:solid 1px #F6358A;
     }
     div.explanation
     {
      height:120px;
      display:none;
     }
0 голосов
/ 27 марта 2012

try 

$(document).ready(function(){
$(".point").click(function(e){
$(e.srcElement).children(".explanation").slideToggle("fast");
});
});

, если .explanation элемент не является дочерним по отношению к .point use $(e.srcElement.parentNode)

...