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

Question

我正在尝试最终创建此页面，当在包含列表的元素旁边单击 "plus" 或 "minus" 图像时，该页面将显示相对隐藏的数据列表。现在，当一个按钮被点击时，除了被点击的按钮之外，所有其他按钮都会发生变化。我知道这是因为 .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

始终尝试将重复模块包装在容器中。然后很容易只在那个容器内遍历以隔离实例

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

Answer 2

我强烈建议您查看 .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>

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

passing an ID with a coldfusion element into a jQuery function

coldfusion

jquery