[英]How to move/position DIV container by changing CSS values using Javascript?
[英]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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.