使用JavaScript更改DIV按钮的值
[英]Changing values of DIV buttons using javascript
问题描述
this is a noob question: 
这是一个菜鸟问题：
I'm defining a button in HTML like this: 我正在这样定义HTML中的按钮：
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
To avoid showing too many buttons I'd like the button to toggle between 为了避免显示过多的按钮，我希望按钮之间进行切换
value="Select good points"
and 和
value="Select bad points
So in javascript i'm using 所以在JavaScript中我正在使用
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getelementsbyclassname("btn-change").value="Select good points";
break;
case 'good':
nextMark = "bad"
$("btn-change").value = "Select bad points";
break;
}
}
The nextMark var changes the colour of marks placed on a leaflet map depending on the value of the button. nextMark var根据按钮的值更改放置在传单地图上的标记的颜色。
The alert shows the case structure is working but the button value isn't changing - what is the correct way of doing this? 警报显示案例结构有效，但按钮值未更改-正确的方法是什么？
3 个解决方案
解决方案1
0 已采纳 2018-06-25 13:10:31
To assign a value to the input using JQuery you need to use .val() and not .value 要使用JQuery向输入分配值，您需要使用.val()而不是.value
var nextMark = "good"; $(".btn-change").on("click", function() { switch (nextMark) { case "bad": nextMark = "good"; $(".btn-change").val("Select good points"); break; case 'good': nextMark = "bad"; $(".btn-change").val("Select bad points"); break; } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="btn-change" type="button" value="Select good points" /> </div>
解决方案2
0 2018-06-25 13:14:41
You need to specify index to document.getElementsByClassName("btn-change")[0].value = as 0 您需要指定document.getElementsByClassName("btn-change")[0].value =索引为0
var nextMark = "good"; $(function(){ $(".btn-change").on("click", function() { alert("you pressed the " + nextMark + " button"); switch(nextMark) { case "bad": nextMark = "good" document.getElementsByClassName("btn-change")[0].value = "Select good points"; break; case 'good': nextMark = "bad" document.getElementsByClassName("btn-change")[0].value = "Select bad points"; break; } }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="btn-change" type="button" value="Select good points" /> </div>
解决方案3
0 2018-06-25 13:44:48
First, you're missing an ending ); 首先，您缺少结尾); to close of the … .on("click" … . 关闭… .on("click" … 。
If you are using jQuery, you need to remember to include that first (at the top in <head> ), then you should define the JavaScript sheet later. 如果使用的是jQuery，则需要记住首先包含它（在<head>的顶部），然后再定义JavaScript工作表。 Common practice is at the end, right before the </body> tag. 常见的做法是最后在</body>标记之前。
<script type="text/javascript" src="js.js"></script>
</body>
Next, for the alert, nextMark is not defined. 接下来，对于警报， nextMark 。 You can do that with this . 您可以使用this 。 when using jQuery, you should keep to it, so use $(this) . 使用jQuery时，您应该坚持使用它，因此请使用$(this) 。
Put this inside the function to define nextMark : 将其放在函数中以定义nextMark ：
var nextMark = $(this);
Once that is done, you need to get the value of it, unless it will say you pressed the [object Object] button . 一旦完成，您需要获取它的值，除非它说you pressed the [object Object] button 。 You do that by adding .val() at the end of the target with jQuery; 您可以通过使用jQuery在目标末尾添加.val()来实现。 so nextMark.val() inside the alert. 因此警报中的nextMark.val() 。
Now to make it switch, you could use a simple if-else statement to switch between the two with: 现在进行切换，您可以使用一个简单的if-else语句在以下两者之间进行切换：
if (nextMark.val() == "Select good points") {
nextMark.val("Select bad points");
} else {
nextMark.val("Select good points");
}
If you want to use switch , then at least to make it work you need to give it what case it is. 如果要使用switch ，那么至少要使其工作，您需要给它提供什么大小写。 What goes inside the (…) of the switch is the case it will use to check. 开关（…）内的内容是用来检查的情况。 If I put switch(x) and define x as var x = 1 or var x = "one , we will use this to decide which case to use: case 1: or case "one": will be executed. 如果我放置switch(x)并将x定义为var x = 1或var x = "one ，我们将使用它来决定要使用哪种情况： case 1:或case "one":将被执行。
var x = 1;
var y = "one";
switch(y) {
case 1:
// "y" is not 1.
break;
case "one":
// "y" is "one", so this will be exectuted.
break;
}
Therefore, we need to define when the button is "good" or "bad". 因此，我们需要定义按钮何时是“好”或“坏”。 You could do this by using the literal value, like: 您可以通过使用文字值来做到这一点，例如：
var myMark = $(this).val();
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
$(".btn-change").on("click", function() { var nextMark = $(this); alert("you pressed the " + nextMark.val() + " button"); /* Optional method: */ // if (nextMark.val() == "Select good points") { // nextMark.val("Select bad points"); // } else { // nextMark.val("Select good points"); // } var myMark = $(this).val(); /* or var myMark = nextMark.val(); */ switch(myMark) { case "Select bad points": $(this).val("Select good points"); break; case 'Select good points': $(this).val("Select bad points"); break; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- jQuery included in this example to make it work --> <div> <input class="btn-change" type="button" value="Select good points" /> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.