最后点击的元素

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运算符与其他运算符链接在一起，并且只使用一条链接在一起的命令行，而不用重复选择器（这是性能上的浪费）。

• 您可以将.maps（）命令与“地图”一起使用，以一次应用多种样式，如下所示：

.css（{border-right：'solid'，border-right-width：'1px'}）

...但是就像您的情况一样，您只是在修改边框，您可以（并且应该）简单地执行以下操作：

border-right: 1px solid black;