0

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

要点：代码工作正常。线路：242
直播@： http

://www.sinsysonline.com/repair/form_sinsys2.html 不知为何，它正在多次设置我的变量sysStr（点击系统时显示的蓝色标题）。
要观察我在说什么，请浏览流程：单击一个系统，单击一个位置，选择系统类型上的向下箭头，单击一个系统，然后单击一个位置。

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

顺便说一句：为了证明它有效，我只有两种形式：
*Desktop -> Pick-Up
*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>
4

2 回答 2

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 ie

<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() {
于 2013-05-12T04:05:28.883 回答
0

好吧，为了简单起见，我最终还是将它构建到了站点中。

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

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

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

于 2013-05-20T13:41:43.253 回答