Question

当我单击option1时，showcontent将显示hello 1，当我单击option2时，showcontent将显示hi 2，并且更多操作。我使用JQuery来完成

$(document).ready(function() {
  $("#option1").click(function() {
    var s = "hello 1";
    $(".showcontent").text(s);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
  <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
  <input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
  <input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>

但是该代码无法运行，当我单击按钮时，我不应该使用$(".option1").click(function(){，有什么想法吗？

更新：错字$(".option1").click(function(){应该是$("#option1").click(function(){

Answer 1

好的，您正在尝试将选项称为.option1和.option2。但是，那里的点实际上表示一个类，例如您定义的 <input type="radio" name="options" 课程 ="option1" autocomplete="off" checked>

因此，将您的.option1或其他内容替换为#option1。那应该可以解决您的问题。

但是，类.showcontent在您的代码中不存在。也许您想添加一个div类的空白showcontent

Answer 2

事件处理程序不起作用，因为您正在按类进行选择，但是每个单选控件都有一个id。

要解决此问题并使代码更简单，请在 all 单选按钮上放置一个通用类，并将其value属性更改为要在{{1}中显示的文本}。然后，您可以简单地设置该元素的showcontent，如下所示：

text()

$(".option").click(function() {
  $(".showcontent").text($(this).val());
});

Answer 3

因为您选择的是class，而不是id。但您没有任何元素包含类调用$(".option1").click(function() {。所以尝试这样的事情：

.option1

$(document).ready(function() {
  $("#option1").click(function() {
    var s = "hello 1";
    $(".showcontent").text(s);
  });
});

Answer 4

尝试点击使用

$(document).ready(function() {
  $(".option1").on("click",function() {
    var s = "hello 1";
    $(".showcontent").text(s);
  });
});

如果您想将其附加到第一个选项，请在选择器中使用其ID

$(document).ready(function() {
  $("#option1").on("click",function() {
    var s = "hello 1";
    $(".showcontent").text(s);
  });
});

也在html中的body的html部分中添加以下内容。这是因为单击时会将其附加到类为showcontent的元素上

<div class="showcontent"></div>

无法使用JQuery更改文本内容

4 个答案: