Question

我是jQuery的新手，我正在尝试在jQuery中编写一个-keepattributes *Annotation* -keepclassmembers class ** { @org.greenrobot.eventbus.Subscribe <methods>; } -keep enum org.greenrobot.eventbus.ThreadMode { *; }函数，该函数从.click() id #buttons id中的.hide() and .show() id触发。

例如，如果我点击.blue div它应该只显示（）.blueCard div并隐藏.redCard和greenCard

#cards

这段代码似乎有点不对......而且没有用！

<div id="buttons">
    <div class="blue">Click Me!</div>
    <div class="red">Click Me!</div>
    <div class="green">Click Me!</div>
</div>

<div id="cards">
    <div class="blueCard blue"></div>
    <div class="redCard red"></div>
    <div class="greenCard green"></div>
</div>

Answer 1

将事件绑定在div上并获取所单击元素的类。仅显示#cards中的那个并隐藏其他人。

＆＃13;

// Bind click event on all the <div>s inside #buttons
$('#buttons div').click(function() {
    // Get the classname of the clicked div
    var className = $(this).attr('class');
    
    // Show the respective div in cards
    // Hide others
    $('#cards .' + className).show().siblings().hide();
});

＆＃13;

#buttons div {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  color: white;
  text-align: center;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}

#cards {
  clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
    <div class="blue">Click Me!</div>
    <div class="red">Click Me!</div>
    <div class="green">Click Me!</div>
</div>

<div id="cards">
    <div class="blueCard blue">Blue</div>
    <div class="redCard red">Red</div>
    <div class="greenCard green">Green</div>
</div>

＆＃13;

Answer 2

试试这个更简单的代码

$("#buttons > div").click(function(){
  var class= $(this).attr('class');//get the color class
 $('.cards > div').hide();//hide all cards
 $('.cards .'+class).show();//show only the cart with the color class
});

Answer 3

＆＃13;

$("#buttons div").click(function() {
  var buttonColors = $(this).attr("data-color");
  $('#cards div').hide()
  $('.' + buttonColors).show()
});

＆＃13;

#cards div{display:none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <div class="blue" data-color='blue'>Click blue!</div>
  <div class="red" data-color='red'>Click red!</div>
  <div class="green" data-color='green'>Click green!</div>
</div>

<div id="cards">
  <div class="blueCard blue">blue</div>
  <div class="redCard red">red</div>
  <div class="greenCard green">green</div>
</div>

＆＃13;

添加data-attr使用它来告诉点击哪个div

Answer 4

你正在思考它。

首先绑定#buttons div上的点击事件然后隐藏#cards内的所有div 最后，使用点击的div的class来显示正确的卡片。

$("#buttons div").on('click', function() {
  $('#cards>div').hide();
  $('#cards>div.'+$(this).attr('class')).show();
})

#cards>div { width: 100px; height: 100px; display: none; }
#cards .blue { background: blue; }
#cards .red { background: red; }
#cards .green { background: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <div class="blue">Click Me!</div>
  <div class="red">Click Me!</div>
  <div class="green">Click Me!</div>
</div>

<div id="cards">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
</div>

Answer 5

问题可能出在这里 if($(buttonColors + cardColors).length > 0){

您不必在此处使用$，因为buttonColors和cardColors已经保存。

jQuery单击多个类名之间的函数

5 个答案: