Javascript 如何在单击时更改css背景

请检查此项，这里有两个名为

step wrapper

的div，在这些

step wrapper

div中有三个名为

step box

的div。它的书写方式是，当点击

step框时，背景色变为黄色

我添加了一个重置按钮。我需要的是单击重置按钮，上次单击的
step box
div的颜色应变为白色。但在这段代码中，当我单击“重置”按钮时，所有步骤框的背景颜色都会变为白色。
我相信这就是您要寻找的：

我们正在保存对
lastClicked
div的引用，并在点击
reset
时专门针对它。像这样：

var $lastClicked = null;

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    $lastClicked = $(this);
});


$('.reset').on('click',function(){
    if ( $lastClicked ) {
        $lastClicked.css( 'background-color', '#fff' );
        $lastClicked = null;
    }
});

编辑：改进了代码。使用显式
var
实例化将其保持在范围内
 将类last添加到上次单击的元素并重置此元素

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    $('.last').removeClass('last');
    $(this).addClass('last');
});


$('.reset').on('click',function(){
    $( ".step_box.last" ).css( 'background-color', '' );
});

看到这个了吗
我所做的是，我在您的
步骤框
类中添加了一个
ID
属性，并在单击
步骤框
时使用
ID
设置一个隐藏字段。稍后在单击重置时，我使用了在隐藏字段中设置的id

请输入下面的代码

JS

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
    document.getElementById('test').value=this.id;
});


$('.reset').on('click',function(){
    var a= document.getElementById('test').value;
    $( "#"+a ).css( 'background-color', '' );

});

HTML

<div class="step_wrapper">
    <div class="step_box" onclick="show('Page1');" id="1"> <span>Content of page 1</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page2');" id="2"> <span>Content of page 2</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page3');" id="3"> <span>Content of page 3</span>

        </p>
    </div>
</div>
<br>
<br>Second Wrapper
<br>
<br>
<div class="step_wrapper">
    <div class="step_box" onclick="show('Page1');" id="4"> <span>Content of page 1</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page2');" id="5"> <span>Content of page 2</span>

        </p>
    </div>
    <div class="step_box" onclick="show('Page3');" id="6"> <span>Content of page 3</span>

        </p>
    </div>
</div>
<input type="hidden" id="test" />
<div class="reset">Reset</div>


第1页内容

第2页内容

第3页内容




第二包装




第1页内容

第2页内容

第3页内容

重置

我创建了一个名为last的变量，并将单击的对象分配给它。这样，当您点击reset时，它将知道单击的最后一个元素是什么。如果要查找倍数，可以创建一个数组并使用
.push（）
创建最后单击的元素字符串，但这应该可以回答您的问题

var last;

$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
last = this;
});


$('.reset').on('click',function(){
$(last).css("background-color", "white");
});`

它看起来有点奇怪，当你只有一个重置按钮在最后，但只想重置一个包装。如果我们在包装器div中添加一个reset按钮，并在单击每个reset时只重置该包装器，会怎么样？看看你是否喜欢

HTML:

所以你想让它更像一个撤销按钮？使用jquery addclass和removeclass方法。虽然我建议使用
var lastClicked
而不是
$lastClicked
为什么？在我看来，对这个变量使用
$
非常有意义。您现在可以很容易地看到某个对象是否是jQuery对象。对jQuery对象使用
var$variable
，对所有其他对象使用
var variable
。我认为应该是var$lastClicked。我刚刚更新了代码$lastClicked之所以有意义，是因为您可以判断它是一个类似@Mave stated的jQuery对象。但是
var
一开始就应该在那里。那是我的错误。代码已更新。@Mave，对，对不起，var$lastClicked，而不仅仅是窗口。$lastClicked
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>

    </p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>

    </p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>

    </p>
</div>
<div class="reset"> Reset </div>
</div>
<br>
<br>Second Wrapper
    <br>
        <br>
 <div class="step_wrapper">
 <div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>

    </p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>

    </p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>

    </p>
</div>
<div class="reset"> Reset </div>
</div>

$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#eeffaa');
});


$('.reset').on('click',function(){
$( this ).parent().find(".step_box").css( 'background-color', '' );
});