Question

好的所以我有3个按钮

<div id="button1" onclick="choose1()">Button1</div>
<div id="button2" onclick="choose2()">Button2</div>
<div id="button3" onclick="choose3()">Button3</div>

还有一个开始按钮

<div id="startButton" onclick="noFunction()">Start</div>

我想这样按下3个选项按钮，它会改变从开始按钮调用的功能，并且开始按钮的背景图像应该改变。

有没有办法只使用javascript或我需要jquery吗？似乎也不可能在div标签上使用onclick，jquery也可以这样做吗？

Answer 1

jsFiddle

您可以在onclick代码上使用<div>。但是不应在任何标记上使用onclick。不要将HTML布局和显示与JavaScript功能混淆。直接在JS代码中绑定您的单击处理程序（请注意，此解决方案使用的是jQuery）：

HTML：

<div id="button1">Button1</div>
<div id="button2">Button2</div>
<div id="button3">Button3</div>

<div id="startButton">Start</div>

JS：

function choose1() {
    // ...
}
function choose2() {
    // ...   
}
function choose3() {
    // ...  
}
$(function() {
    $("#button1").click(choose1);
    $("#button2").click(choose2);
    $("#button3").click(choose3);    
});

Answer 2

你可以在javascript中完成（jQuery的任何可能的东西都可以使用普通的javascript，因为jQuery是用javascript编写的。）

从javascript更改startButton的单击处理程序非常简单：

document.getElementById("startButton").onclick = newFunction;

更改背景图片也非常简单：

document.getElementById("startButton").style.backgroundImage = "image.png";

显然，您应该将newFunction和“image.png”替换为您实际想要分别使用的功能和图像。

Answer 3

jQuery IS javascript。它只是一个可以调用的函数/方法库。

要解决您的问题，您应该编写一个更改开始按钮的onclick属性的函数，并将您写入的函数添加到其他按钮的onclick。

像这样：

function chooseOne(){
    document.getElementById('startButton').onclick="/\*whatever\*/";
}

像@nbrooks在评论中所说的那样做得非常好的技术是AngularJS

Answer 4

你可以说

function choose1() {
document.getElementById('startButton').onclick = function() {
 alert("Button one was originally press");
}
}

Answer 5

如果为每个选择器按钮指定一个类，则可以使用javascript对它们进行交互并绑定click事件。然后，您可以在数据属性中存储一个键，您可以在json对象中查找该开始存储相关的操作处理程序和图像。最后，在您的单击处理程序中，您可以通过设置开始按钮的onClick处理程序和背景图像来提取这些属性并将它们应用于开始按钮。

<div class="startSelector" data-startdataid="1">Button1</div>
<div class="startSelector" data-startdataid="2">Button2</div>
<div class="startSelector" data-startdataid="3">Button3</div>

<div id="startButton">Start</div>

<script>

  var startData = {
  "1": {
    action: function() {
      alert("Button 1 was selected");
    },
    image: "/images/button1.jpg"
  },"2": {
    action: function() {
      alert("Button 2 was selected");
    },
    image: "/images/button2.jpg"
  },"3": {
    action: function() {
      alert("Button 3 was selected");
    },
    image: "/images/button3.jpg"
  }
}


var changeStartButton = function(e) {
  var startDataIndex = e.target.dataset.startdataid
  var data = startData[startDataIndex]
  document.getElementById("startButton").onclick = data.action
  document.getElementById("startButton").style.backgroundImage = data.image
}

items =  document.getElementsByClassName("startSelector")
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", changeStartButton);
}
</script>

示例 http://jsfiddle.net/Xk8rv/3/

根据按下的按钮更改要调用的功能

5 个答案: