onclick 更改 javascript/JQuery

Question

我有一些关于onclick和change的问题。你能解释一下当我想点击我的每个 div 时，我应该如何处理我的代码来打印我的一个 onclick 而不是一个一个地总结。我的意思是我只想有 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 clicks on 3 different divs

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

Answer 1

我通常结合使用 CSS classes 和 jQuery

$("div[class^='aClick']").click(function(e){
    //remove all the visible green stuff
    $(".moreWeather.afterClick").removeClass("afterClick");
    //add the one back you want, you can use $(this) to reference the DIV you clicked.
});

如果您愿意，您可以为添加或删除 css class 设置动画，但在没有附加信息的情况下，这是最简单的形式，这是我可以为您指明的最佳方向。

Answer 2

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

使用 startWith 选择器，然后将您的 class 名称解析为

$('[class^=aClick]')

或使用带有数据目标属性的通用 aClick class，以告知您要切换哪个 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()

onclick 更改 javascript/JQuery

onclick with change javascript/JQuery

javascript

jquery

onchange

onclick