jQuery在单击时切换同一类的一个div

Question

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();
      });        
   });
});

我正在从json文件读取数据。 具有“ box”类的div隐藏。 当前，此代码在单击li时显示所有div。 我应该做哪些更改以仅显示与单击的li对应的div？

Answer 1

将控件传递给函数，然后基于控件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();
      });        
   });
});

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

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

然后代替function demo()写这个

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

更新

方法1：

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

方法2：

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

更新2：

方法1：

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

方法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'); 
});

Answer 2

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

我将使用带有CSS的委派jQuery事件处理程序来初始隐藏元素

$(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>");
        });
    });
});

与CSS

.hidden {
    display: none;
}

Answer 3

您应该构造HTML（这个问题不见了！），以便div和li以某种方式“连接”（也许div是li的子级，或者它们具有相同的类，ecc）。 现在行

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

应用于页面中所有带有'.box'类的元素 。 您希望在那里更具选择性，这就是构造html的方式起作用的地方。

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