Question

似乎无法让这对我有用，有人可以给我一些帮助吗？

这应该基于click打开和关闭一段文本，它取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

Demo - .hidden元素位于dom的下一个元素，尝试使用next()选择.hidden并切换它。

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

这避免了字符串连接，每个循环和＆amp;额外的选择器，同时使它更具可读性。

Answer 2

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

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

Javascript使用自定义属性切换

2 个答案: