Question

我正在尝试最终创建此页面，当在包含该列表的元素旁边单击“加”或“减”图像时，该页面将显示相对隐藏的数据列表。现在，当单击一个按钮时，除了单击的按钮之外，所有其他按钮都会更改。我知道这是因为.click（）方法附加到src = plus.gif或src = minus.gif的每个img。但是，我无法弄清楚如何将正确的img id传递给我的函数。

<script>
$( document ).ready(function() {

    $("img[src='plus.gif']").click(function () {
        $("img[src='plus.gif']").toggle();
        $("img[src='minus.gif']").toggle();
    });

    $("img[src='minus.gif']").click(function () {
        /*$("#siteList").toggle();*/
        $("img[src='plus.gif']").toggle();
        $("img[src='minus.gif']").toggle();
    });
});
</script>

<h1><cfoutput>#qOrgSite.BUSINESS#</cfoutput></h1>

<cfloop list="#keysToStruct#" index="i">
    <cfoutput>
        <img src="plus.gif" id="plusImg_#i#" alt="" border="0">
        <img src="minus.gif" id="minusImg_#i#" alt="" border="0" hidden>
        <strong>#busStruct[i].name#</strong><br>
        <div id="siteList" hidden>
            <cfloop array="#busStruct[i].site#" index="j">

                <cfoutput>&nbsp;&nbsp;&nbsp;#j#<br></cfoutput>

            </cfloop>
        </div>
    </cfoutput>
</cfloop>

Answer 1

我强烈建议您查看.data() jquery元素。

以下是您在代码中如何使用它的可能性：

    <script>
    $( document ).ready(function() {
        $(".plusMinusImg").click(function () {
            thisId = $(this).data("id");
            console.debug(thisId);
            $("#Section"+thisId).find(".plusMinusImg").toggle();
            $("#Section"+thisId).find(".siteList").toggle();
        });

    });
</script>


<cfloop list="#keysToStruct#" index="i">
    <cfoutput>
        <div id="Section#i#">
            <img src="plus.gif" data-id="#i#" class="plusMinusImg" alt="" border="0">
            <img src="minus.gif" data-id="#i#" class="plusMinusImg" alt="" border="0" hidden>
            <strong>#busStruct[i].name#</strong><br>
            <div class="siteList" hidden>
                <cfloop array="#busStruct[i].site#" index="j">
                    <cfoutput>&nbsp;&nbsp;&nbsp;#j#<br></cfoutput>
                </cfloop>
            </div>
        </div>
    </cfoutput>
</cfloop>

Answer 2

始终尝试将重复模块包装在容器中。然后，只能在该容器内遍历以隔离实例

<cfoutput>
     <div class="myModuleContainer">
        <img class="icon-plus" src="plus.gif" id="plusImg_#i#" alt="" border="0">
        <img class="icon-minus" src="minus.gif" id="minusImg_#i#" alt="" border="0" hidden>
        <strong>#busStruct[i].name#</strong><br>
        <div id="siteList" hidden>
            <cfloop array="#busStruct[i].site#" index="j">

                <cfoutput>&nbsp;&nbsp;&nbsp;#j#<br></cfoutput>

            </cfloop>
        </div>
   </div>
</cfoutput>

然后在您的事件中，处理程序this是事件发生在

上的元素

$("img.icon-plus, img.icon-minus").click(function () {
    $(this).closest('.myModuleContainer').find('.icon-plus, .icon-minus').toggle();        
});

将带有coldfusion元素的ID传递给jQuery函数

2 个答案: