0

我有一个 HTML 片段，当单击链接时，div 内容成为链接的 div 内容。第一个功能工作正常。这是jQuery 似乎没有响应的第二次点击#hidelink。我在这里想念什么？

<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>
4

4 回答 4

1

您也可以使用 jquery 隐藏和显示，如下所示。

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

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

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

});

如果您使用 firefox 作为浏览器，您可以使用作为插件的 firebug。通过在脚本上放置断点，使用 firebug 可以让您了解哪里出了问题。

希望这会帮助你。

于 2012-10-11T18:38:20.200 回答
1

首先，ID 是唯一的。它必须只存在一次！在您的示例中，有 2 个资源链接。

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

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

你可以用

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

并像这样附加事件侦听器

$(".testing").on("click", function() { 
    doThis();
})
于 2012-10-11T20:01:48.443 回答
0

在您显示的代码中，您在 id 和 value 之间有一个空格；) 此外，id 是唯一的，因此必须使用 id="resourceslink" 是不好的做法:)

于 2012-10-11T18:12:14.010 回答
0

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

一种解决方案是在将内容添加到#presentation. 另一个问题是#hidelink在将 html 添加到#presentation.

更好的解决方案是不使用.html(). 将所有元素添加到#presentation并用display: none. 然后绑定点击事件并使用.show()and.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();
});
于 2012-10-11T18:12:41.610 回答