如何改变CSS背景点击

how to change a css background onclick

本文关键字：CSS 背景 改变 何改变      更新时间：2023-09-26

请检查这个JSFiddle，这里有两个名为step-wrapper的div，在这些step-wrapperdiv中有三个名为step-box的div。它是这样写的，当点击step-boxdiv时，其背景颜色变为黄色。

我增加了一个重置按钮。我需要的是单击重置按钮，最后单击step-boxdiv的颜色应该更改为白色。但是在这段代码中，当我点击重置按钮时，所有步进框的背景颜色都变成了白色。

我相信这就是你要找的:https://jsfiddle.net/richardgirges/8m9qstg3/11/

我们保存了对lastClickeddiv的引用，并在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实例化将其保持在范围内。

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

HTML:

<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>
Javascript:

$('.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', '' );
});

将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', '' );
});
http://jsfiddle.net/8m9qstg3/7/

看这个

我所做的是，我已经添加了一个ID属性到你的step_box类，并使用id设置一个隐藏的字段，当step_box被点击。然后在重置的onClick中，我使用了隐藏字段中设置的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', '' );
});


<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>

http://jsfiddle.net/8m9qstg3/6/

我创建了一个名为last的变量，并将被单击的对象赋值给它。这样，当你点击重置时，它会知道最后一个被点击的元素是什么。如果你正在寻找倍数，你可以创建一个数组，并使用.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");
});`
相关文章：