使用自定义属性的Javascript切换

Question

似乎无法为我工作，有人可以给我一些帮助吗？

http://codepen.io/anon/pen/kABjC

这应该基于单击打开和关闭一段文本，它使用ID＃（它只是一个数字（1、2、3、4等）），并使用该ID作为目标ID来打开和关闭该部分。

Java脚本

$(document).ready(function(){

    $('.classclick').click(function(){
   $('#class'+$(this).Attr('data-id')+"show").show(400); 
   });
});

的HTML

<div class="classes">
    <?php foreach ($classes as $class): ?>
        <div class="class">
            <div class="classclick" data-id="<?=$class['cid']?>">
                <div class="class-title">
                    <?=$class['className']?>
                </div>
                <div class="class-intensity">
                    Intensity: <?=$class['classIntensity']?>
                </div>
            </div>
            <div class="class-show hidden" id="class<?=$class['cid']?>show">
                <div class="class-inner-content">
                    <div class="two-thirds">
                        <?=$class['classDesc']?>    </div>
                    <div class="one-third">
                        Things To Know:
                        asdfasd
                        asdf
                        afsdadfs

                        fsda
                        dfsa
                        dfsadfsa
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

Answer 1

演示 .hidden元素在dom中是下一个，请尝试使用next（）选择.hidden并进行切换。

$('.classclick').click(function(){
   $(this).next(".hidden").toggle(400);
});

这避免了字符串连接，每个循环和额外的选择器，同时使您更易读。

Answer 2

正如Patrick所建议的那样，您可能已经错过了CodePen中的jQuery包含，但是我建议在使用类选择器时使用$ .each。 更新的CodePen

$('.classclick').each(function(){
  $(this).click(function(){
   $('#class'+$(this).data('id')+"show").toggle(400); 
  });
});