javascript - onclick 更改 javascript/JQuery

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 6 年前。

Improve this question

我有一些关于 onclick 和 Change 的问题。你能解释一下，当我想点击我的每个 div 时，我应该如何处理我的代码来打印我的 onclick 之一，而不是一一总结。我的意思是我只想有 1 个绿色(图像上)图 block 并进行更改而不是总结。

for(let i=0; i<woeid.length; i++){
 $( ".aClick"+i ).click(function() {
  $( "#aClick"+i ).toggle( "slow", function(){
  });
 });
};

html div 点击

<div class="col-sm-2">
 <div  id="backgroundImage0" class="inner-container aClick0">
  <p id="weather0"></p><img id="image0">
 </div>
</div>

<div class="col-sm-2">
 <div  id="backgroundImage1" class="inner-container aClick1"><p 
  id="weather1"></p><img id="image1">
 </div>
</div>

绿色领带

 <div class="col-md-2">
  <div class="inner-container moreWeather afterClick"id="aClick0">
   <p id="nWeather0"></p>
  </div>
 </div>

<div class="col-md-2">
 <div class="inner-container moreWeather afterClick"id="aClick1">
  <p id="nWeather1"></p>
 </div>
</div>

3 clicks on 3 different divs

点击 div 是 3 个不同的城市。是否可以只进行 1 个而不是 2 个或更多显示？

Answer 1

我看到可能有帮助的选项:

使用 startWith 选择器，然后将类名解析为

$('[class^=aClick]')

或使用通用的 aClick 类，并使用 data-target 属性来告诉您要切换哪个 div。你的代码会变成这样:

<div class="col-sm-2">
    <div  id="backgroundImage0" class="inner-container aClick" data-target="aClick0">
        <p id="weather0"></p><img id="image0">
    </div>
</div>
<div class="col-sm-2">
    <div  id="backgroundImage1" class="inner-container aClick" data-target="aClick1"><p id="weather1"></p><img id="image1">
    </div>
</div>

您的 jQuery 代码将如下所示:

$(".aClick").click(function() {
  var targetDiv = $(this).data("target");
  $('[id^="aClick"]:not([id="' + targetDiv + '"])').hide('slow');
  if (!$('#' + targetDiv).is('visible')) {
    $('#' + targetDiv).show('slow');
  }
});

jdfiddle:https://jsfiddle.net/wqnhs6dy/4/

编辑:对误解这个问题表示歉意，我修改了脚本，在单击目标 div 时实际隐藏其他 div，同时使用 jquery 选择器startsWith ( ^= ) 和 :not()