Question

这是一个菜鸟问题：

我正在这样定义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根据按钮的值更改放置在传单地图上的标记的颜色。

警报显示案例结构有效，但按钮值未更改-这样做的正确方法是什么？

jsfiddle right here

Answer 1

要使用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>

Answer 2

您需要将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>

Answer 3

首先，您在);的结尾处缺少结尾… .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更改DIV按钮的值

3 个答案: