Question

所以我有这个

<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应该得到“display：block;”或者让它可见的东西。然后当点击btn2时，pre1再次变为不可见，pre2变为可见。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试吧

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

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

此示例与您的html代码一起使用，如果可以更改它，您可以获得更好的代码。

Answer 3

请参阅fiddle

我已经改变了你的HTML ..改变了prevs divsti id的class属性。

<强> 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";

}

Answer 4

JSFIDDLE DEMO - ＆gt; 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。

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

编辑＆＃34; item＆＃34;的css;点击相应的＆＃34; btn＆＃34;

5 个答案:

请参阅fiddle