Question

目标：展示＆＃34;装载机＆＃34; div被点击的加载器类的成员。

我有一系列导航功能，用于填充相邻容器的内容。有些内容需要一段时间才能加载，所以我有一个＃34;加载器＆＃34;我希望在导航栏上显示的css类。当我只使用一个药丸时，我有这个工作，但每次点击任何导航时动画gif都会启动。

我的方法是使用data-category-id作为标识符，但我无法让选择器正常工作。这是html：

<ul class="navpills">
    <li class="category navlink category-button" 
        id="new" 
        data-category-id="new">
        What's new in 2014!<div class="loader"></div></li>
    <li class="category navlink category-button" 
        id="weather" 
        data-category-id="weather">
        Water & Weather<div class="loader"></div></li>
    <li class="category navlink category-button" 
        id="sportcourt" 
        data-category-id="sportcourt"> 
        Sport Court<div class="loader"></div></li>
    //...more navpill li's
</ul>

jquery / javascript是：

//initially, hide all loaders
$(".loader").hide();

// Click handler for category_button class
$(".category-button").click(function(e) {

//if category-id is present, extract the category-id and show loader    
if($(this).attr("data-category-id")) {
        categoryId = $(this).attr("data-category-id");

        $(".loader[data-category-id = categoryId]").show();
    }

    //sendServiceRequest is a generic function to take 3 inpouts ( name-value pair, a success callback function, a failure callback function) and process an ajax post;
    sendServiceRequest(
        "category-id=" + categoryId,
        function(data, status){
            $("#main_content").html("");
            $("#main_content").html(data);
            $("#main_content").show();
            $(".loader").hide();
            $("#main_content").scrollView();
        },
        function(data, status, error){
            $(".loader").hide();
            console.log("FAIL!");            
        });        
});

我希望在点击的导航栏上显示装载程序div显示，但到目前为止装载程序没有出现在任何导航栏上。

为什么要赢得这项工作？

Answer 1

问题在于你每次都选择所有装载机：

$(".loader[data-category-id = categoryId]").show();

表示：为我提供loader类和data-category-id属性且值为categoryId变量的所有元素。顺便说一句，你的语法不正确，你应该：

$(".loader[data-category-id = '"+categoryId+"']").show();

此外，加载器div在您的HTML中没有data-category-id属性。

您只需在当前节点中选择加载程序。你有两种方法可以做到：

$(this).find(".loader").show();

因为您位于特定节点上的事件处理程序中，所以可以使用this，$(this)访问当前节点以获取相应的jQuery对象。在这里，它意味着“使用loader类找到我当前节点的所有子元素。”

或者

$(".loader", $(this)).show();

jQuery选择器的第二个参数允许您精确搜索元素的上下文。

不要忘记在隐藏中进行此更改。

动态选择一个类成员

1 个答案: