Question

我有一个按钮和一个微调器div

<button type = "button" value= "Make Current" class = "current_button"> </button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
    <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>

我在rails上使用ruby循环并显示多个按钮，我想显示用户点击的按钮前面的微调器。这就是我所做的

$('.current_button').on('click', function() {
    $('.loading_spin_current').show();
});

但它显示了所有按钮前面的微调器。请告诉我我该怎么办，谢谢你提前！

Answer 1

$('.loading_spin_current')选择所有带有loading_spin_current类的元素，您只想在按钮后面选择元素，因此请使用 next() 方法

$('.current_button').on('click', function() {    
    $(this).next('.loading_spin_current').show();
});

next() ：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。（摘自https://api.jquery.com/next/）

＆＃13;

$('.current_button').on('click', function() {
  $(this).next('.loading_spin_current').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>

＆＃13;

更新：如果您想在展示和隐藏之间切换，请使用 toggle() 代替 show()

$('.current_button').on('click', function() {    
    $(this).next('.loading_spin_current').toggle();
});

Answer 2

您可以使用.next()方法获取所点击按钮的相应微调框元素

$('.current_button').on('click', function() {

    $(this).next().show();
});

Javascript - 在特定按钮的前面加载微调器

2 个答案: