带有更改 javascript/JQuery 的 onclick

Matt 发表于 Dev

马特

我有一些关于 onclick 和 change 的问题。你能解释一下我应该用我的代码做什么来打印我的一个 onclick 而不是当我想点击我的每个 div 时一一总结。我的意思是我只想有 1 个绿色（在图像上）图块并更改而不是总结。

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 个不同的 div 上点击 3 次

那是 3 个不同的城市点击 div。是否可以只做一个而不是 2 个或更多的显示。

喜欢

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

使用 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，同时使用 jquery 选择器 startsWith ( ^= ) 和 :not()

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。