Question

我在Wordpress页面上有几个复选框，其ID为以下格式

id = 'more-talktime-{{post.id}}其中post.id是动态设置的。

然后我有一个id为id = 'talktime-options-{{post.id}}'

的div元素

我尝试做的是点击复选框时，它会显示/隐藏相关的div元素。我试着这样做了：

jQuery( function ( $ ) {

   jQuery(document).ready(function(){
        jQuery('[id^=more-talktime-]').change(function(){
            var id = this.id.split('-').pop();
                if(this.checked)
                    jQuery('#talktime-options-' + id).fadeIn('slow');
                else
                    jQuery('#talktime-options-' + id).fadeOut('slow');
        });
    });
});

我确认var id是正确的。{1}}。但是显示/隐藏不起作用，我在控制台上没有任何错误。

div元素默认为display: none。

编辑以添加一些HTML代码：

<div class="col-md-6 add-on-service">
    <h3>More Talktime</h3>
    <input type="checkbox" name="more-talktime" id="more-talktime-{{post.id}}" class="add-on-service-checkbox">
    <label for="more-talktime" class="add-on-service-description">blah blah blah</label>
</div>

<div class="add-on-service talktime-options hidden-box" id="talktime-options-{{post-id}}">
    <h3>Choose Talktime Duration</h3>
        ......
</div>

固定我发现了这个问题。正如您在HTML代码中看到的那样，div元素有一个拼写错误而不是{{post.id}}，而{{post-id}}则带有短划线。这样一个愚蠢的错误。但是你的所有评论和答案都帮我挖掘了更多，并找到了问题。

Answer 1

您的代码似乎正常工作，具体如下。如果在页面加载后将带有动态生成的ID的复选框和div添加到DOM，您可能希望将以下内容用于“更改”侦听器。

.no-display {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="more-talktime-1">Check 1</label>
<input type="checkbox" id="more-talktime-1" />
<div id="talktime-options-1" class="no-display">Div 1</div>
<label for="more-talktime-2">Check 2</label>
<input type="checkbox" id="more-talktime-2" />
<div id="talktime-options-2" class="no-display">Div 2</div>

public static void SetCommand<T>(string commandName, Action<T> execution)
     where T : new()
{
    //Omitted unimportant
}

Answer 2

你必须改变

var id = this。 id .split（' - '）。pop（）; to var id = $（this）。 attr（'id'） .split（' - '）。pop（）;

使用.attr（）方法

您还可以使用.fadeToggle（），确保元素的display属性设置为none或block。

在淡入和淡出之间切换

$('#talktime-options-' + id).fadeToggle();
$('#talktime-options-' + id).fadeToggle("slow");
$('#talktime-options-' + id).fadeToggle(3000);

Answer 3

＆＃13;

jQuery(function($) {
    jQuery(document).ready(function(){
        jQuery('[id^=more-talktime-]').change(function(){
            jQuery('#talktime-options-' + this.id.split('-').pop()).fadeToggle('slow');
        });
    });
 });

＆＃13;

[id^=talktime-options-]{
width:100px;
height:100px;
margin:5px;
border:2px solid #ccc;
float:left;
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="more-talktime-1" />check1
<input type="checkbox" id="more-talktime-2" />check2
<input type="checkbox" id="more-talktime-3" />check3
<hr>
<div  id="talktime-options-1">div1</div>
<div  id="talktime-options-2">div2</div>
<div  id="talktime-options-3">div3</div>

＆＃13;

在jQuery

3 个答案: