Jquery在点击时切换同一个类的一个div

function demo(){
$('.box').slideToggle('fast');
}

$(document).ready(function(){
$.getJSON( "js/JobOpenings.json", function( data ) {
      var glrScrlImg = [];

      $.each( data.getJobOpeningsResult, function( key, val ) {
          var st = "",id,st2= "",st3="",id;
          st +="<h4>" + val.JobTitle + "</h4>";           
          st3 += "<div class='box'>" + val.JobDetails + "</div>";
          $("#newsDetails").append("<li  onclick='demo()'>" + st+val.JobSector + "<br>" + st3 + "</li>");
          $('.box').hide();
      });        
   });
});

I am reading data from a json file. The div with 'box' class is hidden. Currently this code is displaying all div on click of the li. What changes should I make to display only the div corresponding to the clicked li?

我正在从json文件中读取数据。带有'box'类的div是隐藏的。目前此代码显示点击li的所有div。我应该做些什么更改才能只显​​示与点击的li相对应的div?

3 个解决方案

#1

Here what we need to do is to find the .box element within the clicked li, so we need to get a reference to the clicked element.

这里我们需要做的是在被点击的li中找到.box元素,因此我们需要获得对被点击元素的引用。

I would use a delegated jQuery event handler with css to initially hide the element

我将使用委托的jQuery事件处理程序与css最初隐藏元素

$(document).ready(function () {
    $('#newsDetails').on('click', 'li', function () {
        $(this).find('.box').toggleClass('hidden');
    })

    $.getJSON("js/JobOpenings.json", function (data) {
        var glrScrlImg = [];

        $.each(data.getJobOpeningsResult, function (key, val) {
            var st = "",
                id, st2 = "",
                st3 = "",
                id;
            st += "<h4>" + val.JobTitle + "</h4>";
            st3 += "<div class='box hidden'>" + val.JobDetails + "</div>";
            $("#newsDetails").append("<li>" + st + val.JobSector + "<br>" + st3 + "</li>");
        });
    });
});

with css

.hidden {
    display: none;
}

#2

Pass the control to the function and then based on your control slideToggle its respective .box

将控件传递给该函数,然后根据您的控件slideToggle其各自的.box

function demo(ctrl){
   $(ctrl).find('.box').slideToggle('fast');
}

$(document).ready(function(){
$.getJSON( "js/JobOpenings.json", function( data ) {
      var glrScrlImg = [];

      $.each( data.getJobOpeningsResult, function( key, val ) {
          var st = "",id,st2= "",st3="",id;
          st +="<h4>" + val.JobTitle + "</h4>";           
          st3 += "<div class='box'>" + val.JobDetails + "</div>";
          $("#newsDetails").append("<li  onclick='demo(this)'>" + st+val.JobSector + "<br>" + st3 + "</li>");
          $('.box').hide();
      });        
   });
});

Or add a class to li and attach an event handler like below instead of writing inline onclick as below:

或者向li添加一个类并附加一个如下所示的事件处理程序,而不是如下所示编写内联onclick:

$("#newsDetails").append("<li class="someclass"'>" + st+val.JobSector + "<br>" + st3 + "</li>");

and then instead of function demo() write this

然后代替函数demo()写这个

$('#newsDetails').on('click','.someclass',function(){
     $(this).find('.box').slideToggle('fast');
});

UPDATE

Method 1:

function demo(ctrl){
       $('#newsDetails').find('li.box').hide('fast'); //hide all the .box
       $(ctrl).find('.box').slideToggle('fast');
}

Method 2:

$('#newsDetails').on('click','.someclass',function(){
         $('#newsDetails').find('li.box').hide('fast'); //hide all the .box 
         $(this).find('.box').slideToggle('fast'); 
});

UPDATE 2:

Method 1:

function demo(ctrl){
       $('#newsDetails').find('li.box').not($(ctrl).find('.box')).hide('fast'); //hide all the .box
       $(ctrl).find('.box').slideToggle('fast');
}

Method 2:

$('#newsDetails').on('click','.someclass',function(){
         $('#newsDetails').find('li.box').not($(ctrl).find('.box')).hide('fast'); //hide all the .box except this
      $(this).find('.box').slideToggle('fast'); 
});

#3

You should structure your html (which is missing from the question!) so that the div and li are "connected" in some way (maybe the div is child of li, or they have same class, ecc). Right now the line

你应该构造你的html(问题中缺少这个!),以便div和li以某种方式“连接”(也许div是li的子,或者他们有相同的类,ecc)。现在就行

$('.box').slideToggle('fast');

is applied to all element with class '.box' in your page. You want to be more selective there, that's where the way you structure the html comes into play.

应用于页面中具有类“.box”的所有元素。你希望在那里更有选择性,那就是你构建html的方式发挥作用。

Here's an example: http://jsfiddle.net/owe0faLs/1/

这是一个例子:http://jsfiddle.net/owe0faLs/1/