1

我正在尝试学习一些 javascript/jquery，但我没有取得太大进展..

我有多个这样的 div：

 <div class="article1" style="display:none;">content</div>
 <div class="article2" style="display:none;">content</div>
 <div class="article3" style="display:none;">content</div>

在每个类下我都有一个文本链接，一旦单击它，我希望它显示特定的 div。

像这样 ：

<a href="javascript:toggle(1);" class="showarticle">View Article</a>

所以我想我会做一个我可以给出一个ID的函数，并在点击时显示div，这就是我试过的：

<script>  

            function toggle( id ) {
            $(".showarticle").click(function()){
               $(".article" + id).show();
                }    
            } 

</script>

但是什么也没发生，但我看不出有什么问题。。

有人能告诉我我在这里没有做什么吗？

谢谢

编辑：我已经包含了 jquery 库；）

4

4 回答 4

2

这不是您使用事件处理程序的方式。

事件处理程序加载一次，然后静静地坐在后台，等待触发它们的东西。在您的情况下，您想要click加载等待点击链接的处理程序（在加载 DOM 之后）。

像这样的东西。HTML：

<a href="#" id="1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {            // wait for DOM to load
    $(".showarticle").click(function(e) { // click handler for all .showarticles
        e.preventDefault();               // cancel normal click behavior
        $(".article" + this.id).show();   // if id="1", shows '.article1'
    });
});

那是“最小更改”版本。最佳实践是data-在链接上使用属性而不是 ID，在 div 上使用 ID 而不是类，并在开始时使用样式表将它们全部隐藏。

CSS：

.togglediv {
    display:none;
}

HTML：

<div id="article1" class="togglediv">content</div>
<a href="#" data-togglediv="article1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {            // wait for DOM to load
    $(".showarticle").click(function(e) { // click handler for all .showarticles
        e.preventDefault();               // cancel normal click behavior
        $div = $('#'+$(this).data('togglediv')); // http://api.jquery.com/data
        $div.show();                      // or $div.toggle() to show and hide
    });
});

http://jsfiddle.net/mblase75/sT6gw/

于 2013-02-25T22:41:27.393 回答
1

每次单击其中一个a标签时，都会将click事件绑定到，.showarticle但不执行操作，一种方法是：

function toggle( id ) {
  $(".article" + id).show();
}

您应该为此使用 id 而不是类。

于 2013-02-25T22:39:37.067 回答
0

将标记修复为如下所示：（从类中删除了数字，删除了标记 javascript 函数）

<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>
<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>
<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>

然后这样做：固定语法，删除每次点击添加点击处理程序，更简单的代码。

$(".showarticle").click(function () {
     $(this).prev(".article").show();
 });

编辑：现在，你想隐藏以前显示的，只显示最近点击的：

$(".showarticle").click(function () {
    $('.article').hide();
    $(this).prev(".article").show();
});

编辑：另一种切换方式：假设这些是页面上唯一的“文章”和“展示文章”类

$(".showarticle").click(function () {
    $('.article').hide().eq($('.showarticle').index(this)).show();
});
于 2013-02-25T22:45:03.673 回答
0

Javascript 版本可能如下所示，需要为每个 div 分配唯一的 id：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == "inline") {
        e.style.display = 'none';
    }
    else if(e.style.display == "none") {
        e.style.display = "inline";
    }
}
于 2013-02-25T22:38:50.910 回答