Question

我想制作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");
     });
    });

我希望实现类似的功能，但我希望在点击两个按钮（或链接）时更改图像。 http://jsfiddle.net/maniator/Sevdm/

Answer 1

您可以使用事件委派来跟踪.menulink元素的点击次数。使用e.delegateTarget我们可以让父容器保存一个变量，该变量确定先前是否已点击.menulink元素，如果有，我们可以让它更改背景。

为此，我将click方法切换为on方法。 on方法参数为：

$(element).on(event, delegated selector, function)

JQuery .on documentation

委托只是意味着不是通过在按钮上放置事件来检查是否已经单击了每个按钮，而是在按钮的容器上放置一个事件，并询问导致该事件的元素是否与我们的委托选择器匹配。如果是，则触发提供的功能。要访问代码中委托元素的父级，我们可以使用传递的事件对象，或者在这种情况下e.delegateTarget

JQuery delegateTarget documentation

由于JavaScript中的所有内容都是Object，因此我们可以将新属性和方法分配给未明确属于浏览器最基本体系结构的任何内容。这绝对包括页面的body。

在下面的代码中，我在页面的clicked上放置了一个新属性body。这是在单击第一个.menulink元素时添加的，并在每次后续点击时进行检查。

因此我们可以通过确定body.clicked是否为真来知道它是否是第二次点击。如果是，我们告诉脚本更改背景图像。

＆＃13;

$(function() {
     $('body').on("click", ".menulink", function(e){
     if(e.delegateTarget.clicked) $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
     else e.delegateTarget.clicked = true;
     e.preventDefault();
     });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" title="Switch" class="menulink">switch me</a>
<a href="" title="Switch" class="menulink">switch me</a>
<img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" />

＆＃13;

Answer 2

如果你想确保单击时按钮是唯一的，你需要一种跟踪方式。我正在使用像这里的Set这样的JS对象来与旧版浏览器进行比较。

var clickCount = 0;//count the clicks
var clickTracker = {};//track which id's were clicked
var clickThreshold = 2;//the number of clicks we want before executing the if block
function clickHandler(){//callback function for the event
  if(clickTracker[this.id] === undefined){//we haven't seen this id yet
    clickCount++;//increment the number of buttons clicked
    clickTracker[this.id] = 1;//flag for tracking the click
    if(clickCount >= clickThreshold){//we saw at least clickThreshold clicks
      console.log(clickCount + 'unique clicks happened!');
      //your work here
    }
  }
}

$('.cls').click(clickHandler);//bind events

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn1' class='cls'>1</button>
<button id='btn2' class='cls'>2</button>
<button id='btn3' class='cls'>3</button>
<button id='btn4' class='cls'>4</button>
<button id='btn5' class='cls'>5</button>

Answer 3

这就是我要找的东西

<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>

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

3 个答案: