Question

我觉得这可能是由于基本的误解，但我无法让我的生活得以实现。

我在视图中有一个项目列表，我希望能够勾选复选框来更改视图的显示方式。这与我的代码完美配合，除非你转移到＆＃34; Page 2＆＃34;使用我的 JSON 代码（无页面重新加载）。

新创建的元素＆＃34; Page 2＆＃34;即使我的复选框仍然存在，也请忽略我的代码。

这是我的复选框代码：

function smallCards(){


if (jQuery('input.smallcheck').is(':checked')) {

    jQuery("#card-list").css("display", "inline-grid"); 
    jQuery("#card-list").css("width", "500px"); 
    jQuery(".card-info").css("display", "contents");
    jQuery("figure").css("float", "left");

   //jQuery(".votes").css("font-size", "10px"); 
   //jQuery("#card-list img").css("height", "138"); 
   //jQuery("#card-list img").css("width", "97"); 


  }

}

前两项工作#card-list但.card-info和figure似乎并未应用于新创建的＆＃34; 第2页 ＆＃34;元素。

然后有Jquery代码运行JSON回调以生成页面上的每个项目（包括所有页面的分页）。

这是代码的一小部分：

    jQuery.getJSON('https://www.example.com/getlist.php?sortby='+sortby+'&attrib='+attrib+'&ban='+ban+'&cardset='+cardset+'&type='+type+'&name='+name+'&level='+level+'&race='+race+'&page='+pgno+'&callback=?',
        function (data) {
            host = "https://www.example.com/pics/";

            jQuery.each(data, function (i, val) {

htmlst += '<div id="container"><figure><a data-name="' + val.name + '" onClick="mainsearch(' + val.id + ')" href="javascript:void(0)"><img src="' + host + val.id + '.jpg"></a><figcaption style="line-height:4px;"><div id="votes" class="votes"><i class="fa fa-search fa-lg" aria-hidden="true" title="Times Searched" alt="Times Searched" style="color: #0d0d0d;"></i> '+ReplaceNumberWithCommas(val.times)+'</a>&nbsp;&nbsp;<a href="javascript:void(0);" id="u'+val.id+'" onclick="voteuplist(this)"><i class="fa fa-arrow-up fa-lg" aria-hidden="true" title="Upvote" alt="Upvote" style="color: #FF8b60;"></i> '+val.rating_up+'</a>&nbsp;&nbsp;<a href="javascript:void(0);" id="d'+val.id+'" onclick="votedownlist(this)" style="color: #9494FF;"><i class="fa fa-arrow-down fa-lg" aria-hidden="true" title="Downvote" alt="Downvote" style="color: #9494FF;"></i> '+val.rating_down+'</a></div></figcaption></figure>  <div class="card-info"><div class="card-name">'+val.name+'</div><div class="card-desc"></div></div></div>';

当我生成第二页（使用上面的JSON函数）时，它将忽略我的复选框设置。即使我在上述函数结束时运行smallCards()。

抱歉缺乏细节。这对我来说是一种服务的时代，我现在已经尝试将它自己提升几个月了。

Answer 1

我相信你正在做一个ajax请求所以你需要在ajax完成后再次调用css

 jQuery.getJSON('https://www.example.com/getlist.php?sortby='+sortby+'&attrib='+attrib+'&ban='+ban+'&cardset='+cardset+'&type='+type+'&name='+name+'&level='+level+'&race='+race+'&page='+pgno+'&callback=?',
    function (data) {

//...
if (jQuery('input.smallcheck').is(':checked')) {

    jQuery("#card-list").css("display", "inline-grid");  //Default has no display set
    jQuery("#card-list").css("width", "500px");          //Default has no width set
    jQuery(".card-info").css("display", "contents");     //Default is Display:None 
    jQuery("figure").css("float", "left");               //Default is no float
  }
}});

jQuery .css（）不适用于新创建的CSS类

1 个答案: