Question

请检查此JSFiddle，此处有两个名为step-wrapper的div，在这些step-wrapper div中有三个名为step-box的div。它以这样的方式编写，即在点击step-box div时，其背景颜色变为黄色。

我添加了一个重置按钮。我需要的是点击重置按钮，最后点击的step-box div的颜色应该变为白色。但在此代码中，当我单击重置按钮时，所有步骤框背景颜色都变为白色。

Answer 1

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

我们正在保存对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实例化将其保持在范围内。

Answer 2

如果最后只有一个重置按钮，但只想重置一个包装器，那看起来有点奇怪。如果我们在包装器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', '' );
});

Answer 3

在最后点击的元素的最后添加类并重置此元素。

$('.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/

Answer 4

请参阅此fiddle

我所做的是，我在ID课程中添加了step_box属性，并在id为step_box时使用$('.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', '' ); });设置隐藏字段点击。后来在重置的onClick中，我使用了隐藏字段中设置的id。

请输入以下代码..

JS

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

<强> HTML

@Override
protected ModelAndView processStart(HttpServletRequest request, HttpServletResponse response, BindException be) throws Exception {
   User user=new User();

    return new ModelAndView("UserJSPname","userForm",user);

  }

Answer 5

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");
});`

如何更改css背景onclick

5 个答案:

请参阅此fiddle