Javascript 单击两个按钮时如何更改图像？_Javascript_Jquery

Javascript 单击两个按钮时如何更改图像？

javascript jquery

Javascript 单击两个按钮时如何更改图像？,javascript,jquery,Javascript,Jquery,我想制作jQuery脚本，其中我将有10个按钮，所有按钮都具有不同的颜色，用户单击两个不同的按钮后，将组合单击的按钮颜色，并根据颜色组合使用已准备好的图像切换图像框我的问题是如何为单击的两个按钮（或链接）设置条件 <a href="" title="Switch" class="menulink">switch me</a> <img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" /&

我想制作jQuery脚本，其中我将有10个按钮，所有按钮都具有不同的颜色，用户单击两个不同的按钮后，将组合单击的按钮颜色，并根据颜色组合使用已准备好的图像切换图像框

我的问题是如何为单击的两个按钮（或链接）设置条件

    <a href="" title="Switch" class="menulink">switch me</a>
<img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" />

$(function() {
     $('.menulink').click(function(e){
         e.preventDefault();
       $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
     });
    });


$（函数（）{
$（'.menulink'）。单击（函数（e）{
e、 预防默认值（）；
$（“#bg”）.attr（'src'，”http://placehold.it/333/3ef/img/picture1.jpg");
});
});

我想实现这样的效果，但我想在单击两个按钮（或链接）时更改图像。

您可以使用事件委派来跟踪对

.menulink

元素的单击。使用

e.delegateTarget

我们可以让父容器保存一个变量，该变量确定以前是否单击了

.menulink

元素，如果单击了，我们可以让它更改背景

为此，我将

单击

方法切换为

打开

方法。方法上的

参数为：
$（元素）.on（事件、委托选择器、函数）


委派只是意味着，我们不必通过在按钮上放置事件来检查每个按钮是否被单击，而是将事件放置在按钮容器上，并询问导致事件的元素是否与委派的选择器匹配。如果执行此操作，则启动提供的函数。要访问代码中委托元素的父元素，我们可以使用传递回的事件对象，或者在本例中使用e.delegateTarget


因为JavaScript中的所有内容都是一个对象，所以我们可以将新的属性和方法分配给任何不属于浏览器最基本架构的内容。这绝对包括页面的正文
在下面的代码中，我将一个新属性单击
放在页面的正文
上。这是在单击第一个.menulink
元素时添加的，并在每次后续单击时进行检查
因此，通过确定body.clicked是否为真，我们可以知道这是否是第二次单击。如果是，我们告诉脚本更改背景图像

$（函数（）{
$（'body'）。在（'click'，.menulink'，函数（e）{
如果（e.delegateTarget.clicked）$（“#bg”）.attr（'src'，”http://placehold.it/333/3ef/img/picture1.jpg");
else e.delegateTarget.clicked=true；
e、 预防默认值（）；
});
});
如果您希望确保按钮在单击时是唯一的，那么您将需要一种跟踪已看到按钮的方式。我在这里使用一个JS对象，就像一个集合，用于与旧浏览器兼容

var clickCount=0//计算点击次数
var clickTracker={}//跟踪单击的id
var-clickThreshold=2//执行if块之前所需的单击次数
函数clickHandler（）{//事件的回调函数
如果（clickTracker[this.id]==未定义）{//我们还没有看到这个id
clickCount++；//增加单击的按钮数
clickTracker[this.id]=1；//用于跟踪单击的标志
如果（clickCount>=clickThreshold）{//我们至少看到了clickThreshold点击
log（clickCount+“发生了唯一的点击！”）；
//你在这里的工作
}
}
}
$（'.cls'）。单击（clickHandler）//绑定事件

1.
2.
3.
4.
5
这就是我要找的
<script>
$(document).ready(function() {
  var chosenColors = [];
  $(".colors button").click(function() {
    chosenColors.push($(this).text())
    check();
  });

  function check() {
    if (chosenColors.length === 2) {
      $(".pretty-picture").attr("src", chosenColors.sort().join("-") + ".png")
      chosenColors = [];
    }
  }
});

</script>

<body>
<div class=colors>
  <button type="button">red</button>
  <button type="button">yellow</button>
  <button type="button">blue</button>
</div>
<img class="pretty-picture">

</body>


$（文档）.ready（函数（）{
var chosenColors=[]；
$（“.colors”按钮）。单击（函数（）{
chosenColors.push（$（this.text（））
检查（）；
});
函数检查（）{
if（chosenColors.length==2）{
$（“.pretty picture”）.attr（“src”，chosenColors.sort（）.join（“-”+“.png”）
chosenColors=[]；
}
}
});
红色
黄色的
蓝色
quick and dirty（快速和肮脏）：点击两下，然后按你的要求开火。。。这有什么困难？使用一个变量来存储与所单击按钮相关的信息，当再次单击时，检查变量上是否存在任何现有信息，并将其与当前单击的信息一起使用，然后清除它。为什么不在dblclick上使用？@JoeWarner，因为它不是同一个按钮，我希望事件发生在两个不同的按钮被一个接一个地点击时。现在我不确定我是否以正确的方式说明了问题，所以这里有一个基本代码，可以让您了解我想要什么<代码>变量hasBeenClicked=false$（document）.ready（function（）{$（“#submit1”）.click（function（）{hasBeenClicked=true；}）；var hasBeenClicked2=false；$（“#submit2”）.click（function（）{hasBeenClicked2=true；}）；if（hasBeenClicked==true&&hasBeenClicked2==true）{alert（图像已更改）；}）当第一个按钮被点击，第二个按钮被点击时，做一些事情，但它不起作用。现在我不确定我是否以正确的方式说明了问题，所以这里有一个基本的代码，可以让你知道我想要什么<代码>变量hasBeenClicked=false$（document）.ready（function（）{$（“#submit1”）.click（function（）{hasBeenClicked=true；}）；var hasBeenClicked2=false；$（“#submit2”）.click（function（）{hasBeenClicked2=true；}）；if（hasBeenClicked==true&&hasBeenClicked2==true）{alert（图像已更改）；}）当第一个按钮被点击，第二个按钮被点击时，做一些事情，但它不起作用。