使用自定义属性进行 Javascript 切换

Question

似乎无法让它为我工作，任何人都可以为我提供帮助吗？

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

这应该根据点击打开和关闭文本部分，它采用 ID #，它只是一个数字(1,2,3,4 等)，并使用该 id 目标 id 来打开和关闭该部分.

Javascript

$(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

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

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