Question

我有一段HTML代码，当点击链接时，div内容就会成为链接的div内容。第一个功能正常。这是第二次点击#hidelink，jQuery似乎没有响应。我在这里缺少什么？

<div id="right">
    <div id='titletext'><p>||||||||||||||</p></div>
    <div id='presentation'></div>

    <div class='hidethisdiv'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources'>    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">// <![CDATA[
  $('#mainmenu').fadeIn(2000, function() {
    // Animation complete.
  });

$('#presentation').html($('#years').html());

$( function() {
  $("#resourceslink").click(
    function () {
    $('#presentation').html($('#resources').html());
    }
   );

  $("#hidelink").click(
  function (){
    $('#presentation').html($('#years').html());
  }
  );
  //just add more divs like resources and a hidelink for new conferences
});
</script>

Answer 1

您可以使用jquery hide并显示如下。

$("#hidelink").live('click',function () {

$('#resources').hide();

$('#years').show();

});

如果你使用firefox作为你的浏览器，你可以使用firebug这是一个附加功能。通过使用firebug在脚本上放置断点可以让你知道出了什么问题。

希望这会对你有所帮助。

Answer 2

首先，ID是唯一的。它必须只存在一次！在您的示例中，有2 x resourceslink。

如果您要分组多个元素，请使用类。提醒：每个元素可以有多个类！例如

<a href="#hey" class="testing hello">heyhey</a>

你可以用

来调用它

$(".testing") - or - $(".testing.hello")  - or - $(".hello")

并附加像这样的事件监听器

$(".testing").on("click", function() { 
    doThis();
})

Answer 3

在你显示的代码中，你有一个id和值之间的空格;）同样，id是唯一的，所以不得不使用id =“resourceslink”是不好的做法：）

Answer 4

使用$('#resources').html()元素转换为html。您稍后将其读入。问题是您将click事件绑定到#hidelink，因为html已被解析。事件链接到隐藏元素。

在将内容添加到#presentation后，一种解决方案可能是将点击事件链接起来。另一个问题是，在将html添加到#hidelink后，#presentation不再是唯一的。

更好的解决方案是不使用.html()。将所有元素添加到#presentation并使用display: none隐藏它们。然后绑定点击事件并使用.show()和.hide()来显示#years或#resources

示例：

<div id="right">
    <div id='presentation'>
        <div id ="years">
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
        </div>
        <div id='resources' style="dislay: none">    
            <h4><a id='resourceslink' href='#resources'>2010 Presentations</a></h4>
            <p><a id='hidelink' href='#years'>&laquo;--back</a></p>
        </div>
    </div>
</div>


$("#resourceslink").click(function () {
    $('#resources').show();
    $('#years').hide();
});

$("#hidelink").click(function () {
    $('#resources').hide();
    $('#years').show();
});

jQuery .click功能不起作用

4 个答案: