将带有冷融合元素的 ID 传递给 jQuery 函数答案

【问题标题】：passing an ID with a coldfusion element into a jQuery function将带有冷融合元素的 ID 传递给 jQuery 函数
【发布时间】：2015-03-11 20:04:53
【问题描述】：

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

【问题讨论】：

标签： jquery coldfusion

【解决方案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>

【讨论】：

感谢您的建议。绝对让事情变得更干净、更容易。

【解决方案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();        
});

【讨论】：

帮助很大！谢谢你变化很大！