onclick 更改 javascript/JQuery [关闭]答案

【问题标题】：onclick with change javascript/JQuery [closed]onclick 更改 javascript/JQuery [关闭]
【发布时间】：2017-07-12 14:57:48
【问题描述】：

我有一些关于 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 个或更多显示。

【问题讨论】：

几行 HTML 会更好地帮助回答这个问题。从外观上看，您的 html 可以被修改以使您正在做的事情变得更加简单。我现在可以告诉你，如果你正确使用了你的 html 类，那么 for 循环就不需要这样做了。
我建议包含所有相关代码并生成一个最小完整且可验证的示例stackoverflow.com/help/mcve
我不确定我是否理解这个问题。您在提供的代码中没有任何地方对任何内容进行求和。
你是对的，我没有总结任何东西。也许我的问题是错误的。我的问题是，无论我做什么，我都希望一直只有 1 条绿色领带。我的意思是当我点击华沙时，程序将只打印华沙的 5 个下一个天气日，但是当我点击华沙然后点击巴黎，然后在接下来的 5 天只点击巴黎，等等。相反，它现在打印华沙和巴黎彼此相邻。你可以在这张图片上看到。

标签： javascript jquery onclick onchange

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

【讨论】：

我的意思是你可以有 2 条红色领带。我只需要一个。当我点击 weather0 时，它会打印 moreWeather0，但如果我点击 weather0 然后 weather1 会打印 moreWeather0 form weather1 将变为 moreWeather1 而不是其中的 2 个。
对，我首先弄错了，但我刚刚更新了我的答案，解决方案隐藏了其他 div，只显示你想要的。这应该是一个体面的基础，有望实现您自己的解决方案。
非常感谢！它现在工作正常。

【解决方案2】：

我通常使用 CSS 类和 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 类，但以最简单的形式且无需额外信息，这是我可以为您指出的最佳方向。

【讨论】：