jquery - 最后点击的元素

Question

我有一个这样的 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);    
            }
            });});});

Answer 1

将最后点击的项目存储在一个简单的 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 运算符与其余运算符链接起来，并使用一行链接的命令，而不是重复选择器(这是一种性能浪费)。

• 您可以使用“map”和 .css() 命令一次应用多种样式，如下所示:

.css({右边框: 'solid', 右边框宽度: '1px'})

...但在您的情况下，您只是修改边框，您可以(并且应该)简单地执行此操作:

border-right: 1px solid black;