Question

所以这是我写的代码。我对jquery知之甚少，只是试着写下我所看到的内容。我确信它们更容易运行一次并且它可以工作但是之后它只保留每次点击的一些并且不会为下一次点击调用该功能。我在另一个脚本上遇到同样的问题，我似乎不能多次调用一个函数。一个人做了它似乎做的事情。任何帮助将不胜感激。

$.noConflict();
jQuery(document).ready(function ($) {
    $("#scrollmenu");

    $("#e_emd").click(function () {
        $("#e_em").show();
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_vd").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").show();
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_sd").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").show();
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_ld").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").show();
    });
});

<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div>

<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />

我已经上传了我正在处理的整个页面。

我正在尝试使用的网站http://www.mac-av.com/test2/

我所看到的是，我不能多次使用id来调用我有

的函数

<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div>

在同一页上多次

由于我所拥有的滚动功能，我需要为每个按钮点击不同类别的每个图像进行不同的更改。我这样做是因为当它在具有低分辨率的计算机上的页面时，图像将出现在下一类别的内容窗口下方的左侧。所以制作这个剧本假设隐藏了它的图像，只显示它所在类别的那些，但也能够看到另一个，因为它在它们消失之前滚动。

它适用于第一组按钮，但不适用于之后。我意识到我只能使用id调用它们一次，但是不是为每个脚本创建不同的脚本，是否有更简单的方法？

Answer 1

为什么使用$ .noConflict（）; ？尝试删除它。还尝试从你的ready函数中删除$并使用它而不是“jQuery”，所以它看起来如下：

$(document).ready(function () {
 // blah blah
});

是的，document.ready在加载时会触发，但你将你的id链接到事件，所以它们应该没问题。你在这个页面上有第三方控件或其他ajax控件吗？

Answer 2

你能提供一个指向该页面的链接吗？如果你能做到这一点，我可以快速调试它。 fadeOut将不止一次地工作，因此您的页面脚本和选择器必须有一些东西。

在此期间可能有所帮助的提示：

在您的ID名称中更加详细，在回顾您的代码或其他人看到它时会有所帮助
嵌套时正确放置空间
你在顶部有一个随机的$("#scrollmenu");声明没有做任何事情......你可以摆脱那个
你可以通过将它变成一个函数来使你的代码变得更干 - 将它传递给所有选择器和你想要省略的数组，然后点击循环遍历该数组，如果它匹配你想要的那个遗漏，展示，如果没有，隐藏它。如果你没有明白我的意思，我可以写一个例子。

Answer 3

一些事情：

id s每页只能使用一次
使用CSS选择器和良好的标记来减少代码量
使用CSS来设置元素的样式

jQuery可以读取元素属性，因此可以利用它。

<script type="text/javascript">
$(document).ready(function(){
  // when any link inside scrollmenu is clicked
  $(".scrollmenu a").click(function (e) {
    // don't follow the link
    e.preventDefault();
    // find out which image to show
    var target_id = $(this).attr('href');
    // fadeOut all visible images inside .images that isn't the one we'll show
    $('.images img').is(':visible').not(target_id).fadeOut("slow");
    // show the target
    $(target_id).show();
  });
});
</script>

<div class="scrollmenu">| 
  <a href="#e_em">Event Management</a> | 
  <a href="#e_v">Video</a> | 
  <a href="#e_s"></a>Sound | 
  <a href="#e_l">Lighting &amp; Staging</a> | 
</div>

<div class="images">
  <img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
  <img id="e_v" src="images/video.png" width="1128" height="480" />
  <img id="e_s" src="images/sound.png" width="1011" height="480" />
  <img id="e_l" src="images/light.png" width="1011" height="480" />
</div>

您可以将此与@ JonH的方法结合使用，以获得更复杂的动画序列。

Answer 4

我为你做了一个例子，以进一步阐述我的评论。 http://jsfiddle.net/jMQhZ/11/

点击第一个框会触发#e_emd点击事件。如果再次单击它，则不会发生任何事情，因为该函数无关。如果单击“显示全部”，您将看到所有divs都恢复正常。现在单击#e_emd div将再次运行您的功能。

不能让淡出功能多次工作

4 个答案: