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

Question

我想通过复选框切换输入。这是代码：

的CSS：

.moveaway{ position:absolute;top:-999rem;}

HTML

<p>
<label><?php _e('Setup Template')?></label>
<input class="check-toggle" name="toggle" type="checkbox" value="1" <?php echo $template ? 'checked="checked' : '';?> />
</p>
<p id="template-input" class="<?php echo $template ? '' : 'moveaway'?>">
<lable for="template-name">Template Name</lable>
<input id="template-name" type="text" name="template-name"  value="<?php echo $tamplate; ?>" />
</p>

的javascript：

$("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);
  }
});

当模板名称输入字段为空时，上述代码有效。设置template-name字段值后，包装器p#template-input将合并到包含check-toggle输入的p中。

我不明白改变功能是如何做到这一点的。我想学习如何获得可以通过复选框切换p＃模板输入的结果。

Answer 1

我已对代码进行了一些更改，但它确实有效。

查看demo。

首先我将<p>更改为<div>，最好是从块更改位置然后更改内联，但您仍然可以在CSS上更改它的属性，以继续使用{{1或者从p到仍然在行中，甚至放在div。

中

然后对于 class 我使用了p和addClass，最好更改它的属性。

它可以在demo 模板输入中看到。

像我之前的评论一样，缓存的方法：

removeClass

会跑得更快，结果也一样。您可以看到demo here。