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文件中读取数据。 div＆＃39; box＆＃39; class是隐藏的。目前此代码显示点击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

我们需要做的是在点击的char **largs; void function_1() { printf("Argument 1: %s\r\n",largs[1]); } int main(int argc,char **argv) { largs = argv; function_1(); return 1; }中找到.box元素，因此我们需要获得对点击元素的引用。

我会使用带有css的委托jQuery事件处理程序来初始隐藏元素

li

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

Answer 3

你应该构建你的html（问题中缺少这个！），以便div和li连接＆＃34;在某种程度上（也许div是li的孩子，或者他们有相同的类，ecc）。现在就行了

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

适用于所有带有类＆＃39; .box＆＃39;的元素在您的页面。你希望在那里有更多的选择性，你构建html的方式就会发挥作用。

以下是一个例子：http://jsfiddle.net/owe0faLs/1/

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

3 个答案: