如何使用javascript更改功能切换段落？

我想通过复选框切换输入。代码如下：

css: html 当模板名称输入字段为空时，上述代码起作用。设置模板名称字段值时，包装器

p#模板输入

将合并到包含检查切换输入的p中

---

我不明白变化函数是怎么做到的。我想学习如何获得通过复选框切换p#模板输入的结果。

我对您的代码做了一些更改，效果良好

看这个

首先，我将

更改为

，从块更改位置比从内联块更改位置更好，但您仍然可以在CSS上更改它的属性，以继续使用

p

，或从

div

更改为仍在行中，甚至可以将其放入

p

中

然后对于类，我使用了

addClass

和

removeClass

，最好是更改它的属性

正如您在模板输入中看到的那样

与我前面的评论一样，缓存的方法：

var $templateInput = $("div#template-input");
var $templateName = $("input#template-name");
$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $templateInput.removeClass('moveaway');
  }else{
    $templateInput.addClass('moveaway');
    $templateName.val("0");
  }
});

---

会跑得更快，结果是一样的。您可以看到。

我对您的代码做了一些更改，它可以正常工作

看这个

首先，我将

更改为

，从块更改位置比从内联块更改位置更好，但您仍然可以在CSS上更改它的属性，以继续使用

p

，或从

div

更改为仍在行中，甚至可以将其放入

p

中

然后对于类，我使用了

addClass

和

removeClass

，最好是更改它的属性

正如您在模板输入中看到的那样

与我前面的评论一样，缓存的方法：

var $templateInput = $("div#template-input");
var $templateName = $("input#template-name");
$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $templateInput.removeClass('moveaway');
  }else{
    $templateInput.addClass('moveaway');
    $templateName.val("0");
  }
});

---

会跑得更快，结果是一样的。您可以看到。

您能为我们提供一个jsfiddle.com吗，看起来您的代码是正确的，但我会在应用函数之前缓存引用，这样不管它们是否有内部更改，它仍然会在您的var中引用，您可以从更改中进入闭包。您能为我们提供一个jsfiddle.com吗，看起来你的代码是对的，但是我会在应用函数之前缓存引用，这样不管它们是否有内部更改，它仍然会在你的var中引用，你可以从更改中得到闭包。谢谢！它起作用了！但是最初加载的是模板输入div。我可以让它最初加载“moveaway”类吗？是的，我只是从中提取您的php代码：

class=”“

，或者您可以添加

class=“moveaway”

，也可以。谢谢，我找到了为什么它最初不加载为moveaway的原因——val（0）设置值并保存。因此，我的代码将0视为$template名称。现在我只需要将其保存为null。这里是演示，如果您想要null val，只需将0更改为“”即可。谢谢！它起作用了！但是最初加载的是模板输入div。我可以让它最初加载“moveaway”类吗？是的，我只是从中提取您的php代码：

class=”“

，或者您可以添加

class=“moveaway”

，也可以。谢谢，我找到了为什么它最初不加载为moveaway的原因——val（0）设置值并保存。因此，我的代码将0视为$template名称。现在我只需要将其保存为null。这里是演示，如果需要null val，只需将0更改为“”即可

$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $("p#template-input").attr('class','');
  }else{
    $("p#template-input").attr('class','moveaway');
    $("input#template-name").val(0);
  }
});

var $templateInput = $("div#template-input");
var $templateName = $("input#template-name");
$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $templateInput.removeClass('moveaway');
  }else{
    $templateInput.addClass('moveaway');
    $templateName.val("0");
  }
});