console.log(variable) 通过多次传递来复制自己答案

【问题标题】：console.log(variable) is duplicating itself with multiple passesconsole.log(variable) 通过多次传递来复制自己
【发布时间】：2013-05-12 03:54:12
【问题描述】：

首先，这实际上是我尝试从头开始制作的第一个半分层菜单。如果这段代码看起来很草率，请推荐一些最小化它的技巧。

要点：代码工作正常。线路：242
居住 @： http://www.sinsysonline.com/repair/form_sinsys2.html

出于某种原因，它多次设置我的变量 sysStr （单击系统时显示的蓝色标题）。
要观察我在说什么，请通过流程：单击一个系统，单击一个位置，选择系统类型上的向下箭头，单击一个系统，然后单击一个位置。

我有它 console.log(sysStr) 来查看它正在建立什么以及它正在记录 +1 项的每个工作流。（在完成工作流程时在 firebug 或开发人员工具控制台中查看）。

BTW：为了证明它有效，我只有两种形式：
*桌面 -> 取货
*Desktop -> Drop-Off

为什么每个工作流程都会多次执行 console.log(sysStr)？ 我很难过：/

重点：代码工作正常。线路：242
居住 @： http://www.sinsysonline.com/repair/form_sinsys2.html

<script>
(function() {

var systemDiv = $('div#repair_system'),
    locationDiv = $('div#repair_location'),
    systemH2 = $('h2#system_type'),
    locationH2 = $('h2#location_type'),

    systemSel = $('span#system_selected'),
    systemChange = $('a#system_redo'),
    locationSel = $('span#location_selected'),
    locationChange = $('a#location_redo');

    $("a").click(function() { return false; });

    $('div#repair_system img').on('click', function() {

        var sysStr = $(this).attr('alt');

        systemDiv.slideUp();
        systemSel.show();
        systemSel.text(sysStr);
        systemChange.show();
        locationDiv.slideDown();

        systemChange.on('click', function() {
            $(this).hide();
            systemDiv.slideDown();
            systemSel.hide();
            locationDiv.slideUp();
            locationSel.hide();
            locationChange.hide();
            $('div#repair_forms div').hide();
        });

        locationChange.on('click', function() {
            $(this).hide();
            locationSel.hide();
            systemDiv.slideUp();
            systemSel.show();
            systemChange.show();
            locationDiv.slideDown();
            $('div#repair_forms div').hide();
        });

        $('div#repair_location img').on('click', function() {
            var locStr = $(this).attr('alt'),
                sysStr = systemSel.text();

            locationDiv.slideUp();
            locationSel.show();
            locationSel.text(locStr);
            locationChange.show();
            $('div#repair-' + sysStr + '-' + locStr).show();

            console.log(sysStr);
        });
    });

    $("img.a").hover(
        function() {
        $(this).stop().animate({"opacity": "0"}, "fast");
        },
        function() {
        $(this).stop().animate({"opacity": "1"}, "slow");

    });

})();
</script>

【问题讨论】：

标签： jquery variables console duplicates

【解决方案1】：

这是因为在您的 HTML 中，每个 div 中都有两个 img 标签即

<div class="glow">   <img src="images/remote-icon-bw.jpg" class="a" alt="remote" style="opacity: 1;">   <img src="images/remote-icon.jpg" class="b" alt="remote">   <h2>Remote</h2> </div>

尝试向其中一张图片添加一个类，比如 img-click 即

<div class="glow">   <img src="images/remote-icon-bw.jpg" class="a img-click" alt="remote" style="opacity: 1;">   <img src="images/remote-icon.jpg" class="b" alt="remote">   <h2>Remote</h2> </div>

现在改变这一行

 $('div#repair_system img').on('click', function() {

到

 $('div#repair_system img.image-click').on('click', function() {

【讨论】：

没有结果？在响应您提到的确切代码后更新实时站点。它仍然为每个操作堆叠 console.log(sysStr)。因此，在整个工作流程中的第 18 次（从选择所有内容后更改系统类型）它将 console.log(sysStr) 18 次。更不用说底部的工作正常，与第一层的样式相同：-P

【解决方案2】：

好吧，为了简单起见，我还是把它构建到了网站中。

变量 sysStr 的重复 console.log 仍然有助于识别：

http://www.sinsysonline.com/repair/contact.html（整页） http://www.sinsysonline.com/repair/form.php（仅表格）

我们将不胜感激有关标记和 jQuery 流程的反馈（打我！）。

【讨论】：