1

我有一个这样的 div 列表：

<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>

加载页面时，将显示具有 id 内容的第一个 div。我想做的是当我单击其他一些 div (id="item") 以隐藏前一个单击项目的内容并对前一个单击的 div (id="item") 进行一些更改时。到目前为止，我已经尝试过：

$(document).ready(function(){
        $(".item").first().css("border-right","none");
        $(".item").click(function(e) {
        $pressed = $(this);
             if ($pressed.data("lastclick")){
                    $pressed.data("lastclick").css("border-right","solid");
                    $pressed.data("lastclick").css("border-right-width","1px");
                    $pressed.data("lastclick").find("span").remove();
             } 
    $(this).next(".content").slideToggle(\'slow\', function() {
                 if ( $(this).is(":visible")) {
                      $pressed.css("border-right","none");
                      $pressed.append(\'<span style="float:right;font-weight:bold">\'+$(this).children().length+\'</span>\');
                      $pressed.data("lastclick",$pressed);    
            }
            });});});
4

2 回答 2

5

将最后点击的项目存储在一个简单的 JavaScript 变量中

var lastClicked;
$(".item").click(function(e) {
    $(this). // Do your stuff to the clicked element here

    // Then do what you will to the last-clicked element
    // ...

    // And finally assign the clicked element to the lastClicked variable
    lastClicked = clicked;
}

一些有用的提示：

  • 正如评论中提到的，. 是一个类选择器，# 是一个 ID 选择器。您在示例中尝试使用类选择器按 ID 选择元素。

  • 在我拥有的地方，$(this)您可以链接运营商。也就是说，您可以将 CSS 运算符与其余运算符链接起来，并使用一条链接的命令行，而不是重复选择器（这是一种性能浪费）。

  • 您可以使用带有 .css() 命令的“映射”来一次应用多个样式，如下所示：

.css({border-right: 'solid', border-right-width: '1px'})

...但是在您的情况下，您只是在修改边框，您可以（并且应该）简单地这样做：

border-right: 1px solid black;
于 2012-10-31T18:49:32.517 回答
1

您可以通过执行与此类似的操作来简化您的代码。

JSFIDDLE

$('.item').click(function(){
  $('.content').slideUp();
  $(this).next('.content').slideDown()        
})​
于 2012-10-31T18:47:12.717 回答