1

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

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);
  }
});

上面的代码在模板名称输入字段为空时有效。设置模板名称字段值后，包装器p#template-input将合并到包含检查切换输入的 p 中。

我不明白更改功能是如何做到的。我想了解如何获得可以通过复选框切换 p#template-input 的结果。

4

1 回答 1

1

我对您的代码进行了一些更改，并且可以正常工作。

看演示。

因此，首先我将 更改<p>为<div>，最好将位置从块更改为内联位置，但是您仍然可以更改它在 CSS 上的属性，以继续使用por from divto 仍然在行中，甚至放在p.

然后对于我使用过的类addClassand removeClass，然后更改它的属性更好。

正如您在演示中看到的那样，它的工作原理是template-input。

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

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

会跑得更快，结果是一样的。你可以在这里看到演示。

于 2013-01-31T12:20:52.657 回答