Question

首先，这是我从头开始尝试制作的第一个半分层菜单。如果此代码看起来很草率，请建议任何最小化它的提示。

指出：代码工作正常。行：242
直播@： http://www.sinsysonline.com/repair/form_sinsys2.html

出于某种原因，它设置了我的变量sysStr（在单击系统时显示蓝色标题）多次。
要观察我正在谈论的内容，请完成以下流程：单击系统，单击位置，选择系统类型上的向下箭头，单击系统，然后单击某个位置。

我有它console.log（sysStr）来查看它正在建立什么，并为每个工作流记录+1项。（在工作流程中查看firebug或开发人员工具控制台）。

顺便说一句：为了证明它有效，我只有两种形式：
*桌面 - ＆gt;提货
*桌面 - ＆gt;下车

为什么每个工作流程都会多次调用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>

Answer 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() {

Answer 2

嗯，为了简单起见，我最终还是把它建成了网站。

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

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

对标记和jQuery流的反馈将不胜感激（打我！）。

console.log（变量）通过多次传递复制自身

2 个答案: