[英]Changing values of DIV buttons using javascript
這是一個菜鳥問題：
我正在這樣定義HTML中的按鈕：
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
為了避免顯示過多的按鈕，我希望按鈕之間進行切換
value="Select good points"
和
value="Select bad points
所以在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;
}
}
nextMark var根據按鈕的值更改放置在傳單地圖上的標記的顏色。
警報顯示案例結構有效，但按鈕值未更改-正確的方法是什么？
要使用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>
您需要指定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>
首先，您缺少結尾); 關閉… .on("click" … 。
如果使用的是jQuery，則需要記住首先包含它（在<head>的頂部），然后再定義JavaScript工作表。 常見的做法是最后在</body>標記之前。
<script type="text/javascript" src="js.js"></script>
</body>
接下來，對於警報， nextMark 。 您可以使用this 。 使用jQuery時，您應該堅持使用它，因此請使用$(this) 。
將其放在函數中以定義nextMark ：
var nextMark = $(this);
一旦完成，您需要獲取它的值，除非它說you pressed the [object Object] button 。 您可以通過使用jQuery在目標末尾添加.val()來實現。 因此警報中的nextMark.val() 。
現在進行切換，您可以使用一個簡單的if-else語句在以下兩者之間進行切換：
if (nextMark.val() == "Select good points") {
nextMark.val("Select bad points");
} else {
nextMark.val("Select good points");
}
如果要使用switch ，那么至少要使其工作，您需要給它提供什么大小寫。 開關（…）內的內容是用來檢查的情況。 如果我放置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;
}
因此，我們需要定義按鈕何時是“好”或“壞”。 您可以通過使用文字值來做到這一點，例如：
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>
如何通過使用JavaScript更改CSS值來移動/放置DIV容器？
[英]How to move/position DIV container by changing CSS values using Javascript?
使用javascript和不同於最初可見的圖像來更改DIV可見性。 不使用按鈕
[英]Changing DIV visibility using javascript and a different image than was initially visible. Not using buttons
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.