单击相应的“btn”时编辑“item”的css答案

【问题标题】：Edit css of "item" when clicking on corresponding "btn"单击相应的“btn”时编辑“item”的css
【发布时间】：2015-03-06 15:15:25
【问题描述】：

所以我有这个

<div class="btns">
    <div class="btn1"></div>
    <div class="btn2"></div>
    <div class="btn3"></div>
    <div class="btn4"></div>
</div>

<div class="prevs">
    <div class="pre1"></div>
    <div class="pre2"></div>
    <div class="pre3"></div>
    <div class="pre4"></div>
</div>

http://jsfiddle.net/uzpxjukv/

你有 btn1、btn2、btn3 和 btn4。我试图做到这一点，以便当您按下 btn1 时，具有 pre1 类的 div 应该得到“显示：块；”或使其可见的东西。然后当点击btn2时，pre1再次变为不可见，pre2变为可见。

【问题讨论】：

闻起来像家庭作业...... - 到目前为止你尝试过什么？除了“空”的小提琴还有什么？

标签： javascript jquery html css

【解决方案1】：

也许是这样的？如果会有更多的按钮，应该会更加优化。

$('.btns').find('div').click(function(){
    $('.prevs').find('div').eq($(this).index()).toggle();
});

$('.btns').find('div').click(function(){
        $('.prevs').find('div').eq($(this).index()).toggle();
    });

.prevs div:not(.pre1) {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
    <div class="btn1">Button 1</div>
    <div class="btn2">Button 2</div>
    <div class="btn3">Button 3</div>
    <div class="btn4">Button 4</div>
</div>

<div class="prevs">
    <div class="pre1">Previews 1</div>
    <div class="pre2">Previews 2</div>
    <div class="pre3">Previews 3</div>
    <div class="pre4">Previews 4</div>
</div>

【讨论】：

【解决方案2】：

JSFIDDLE 演示 -> http://jsfiddle.net/uzpxjukv/5/

$('.btns div').click(function() {
    var classNumber = this.className.slice(-1);
    $('.prevs div').hide();
    $('.pre' + classNumber).show();
});

点击按钮div，先隐藏所有pre div，然后只显示相关的div。

【讨论】：

【解决方案3】：

试试看

$('.btns > div').on('click', function() {
  var numberOfDiv = $(this).attr('class').slice('-1'),
      prevs = $('.prevs');

      prevs.find('> div').hide();
      prevs.find('.pre' + numberOfDiv).show();
});

这个例子是你的html代码，如果可以改变它，你可以获得更好的代码。

【讨论】：

【解决方案4】：

见fiddle

我稍微更改了您的 HTML。更改了 prevs divsti ids 的类属性。

HTML

<div class="btns">
    <div class="btn1" id="1" onClick="reply_click(this.id)"></div>
    <div class="btn2" id="2" onClick="reply_click(this.id)"></div>
    <div class="btn3" id="3" onClick="reply_click(this.id)"></div>
    <div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
    <div id="pre1"></div>
    <div id="pre2"></div>
    <div id="pre3"></div>
    <div id="pre4"></div>
</div>

JS

function reply_click(id) {
    document.getElementById("pre" + id).style.display = "block";

}

【讨论】：

【解决方案5】：

只要您知道 div 使用什么命名系统，您就可以按照这些思路使用一些东西。（要查看是否正常工作，请使用开发者工具查看）

$('.btns div').on('click', function() {
  var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
  $('.prevs div').css('display', 'none'); //reset all divs to being hidden
  $('.pre' + currClass).css('display', 'inline-block'); //show desired div
});

.btns div {
  background-color: gray;
}
.btns div, .prevs div {
  width: 2em;
  height: 2em;
  display: inline-block;
  padding-right: 0.2em;
}

.prevs div {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
    <div class="btn1"></div>
    <div class="btn2"></div>
    <div class="btn3"></div>
    <div class="btn4"></div>
</div>

<div class="prevs">
    <div class="pre1"></div>
    <div class="pre2"></div>
    <div class="pre3"></div>
    <div class="pre4"></div>
</div>

【讨论】：