Question

我需要一点JS帮助这个显示/隐藏功能

基本上在网站上有PHP循环，它在X次以下回显HTML代码。

我需要一些JS来允许我使用show / hide函数来定位每个单独的实例，不幸的是我对JavaScript的了解很少 - 我从开发人员那里获得了一些帮助，但是我似乎在某个地方出了问题作为控制台的行返回此错误消息“Uncaught SyntaxError：Unexpected identifier”

非常感谢任何见解或帮助！

提前致谢

HTML

<span class="contentShow" >Dropdown Text Here...</span>
<a id="prod_more_trigger" ><span>More...</span></a>

JS

    <script type="text/javascript">
        $(document).ready(function()
        {

            var i = 0;
            $(document).find('span.contentShow').each(function() {
                $(this).attr('data-id', i++);

                $('span.contentShow').hide();

            });

            i = 0;
            $(document).find('a.prod_more_trigger').each(function() {
                $(this).attr('data-id', i++);
                $(this).click(function() {

                var $span = $(document).find('span.content[data-id="' + $(this).attr('data-id) + "]');


                $('span.contentShow').toggle('fast');


                });
            });


        });
</script>

Answer 1

您在下面的这一行中缺少几个引号

   find('span.content[data-id="' + $(this).attr('data-id) + "]');

应该是

   find('span.content[data-id="' + $(this).attr('data-id') + '"]');
                                                        ^    ^
                                                        |    |
                                          Missing the closing quote

你的主播也是这样的

<a id="prod_more_trigger">

原来是

<a class="prod_more_trigger">

由于您在JS

中使用了班级选择器

您无需创建局部变量i来分配值。 $.each传递索引。而且您不需要将事件处理程序嵌套在$.each循环

中

<强>代码

$(document).ready(function () {
    // Cache your selectors when using multiple times
    var $content = $('span.contentShow'),
        $trigger = $('a.prod_more_trigger');
    $content.each(function (i) {
        $(this).attr('data-id', i);
    });
    // This can be outside the loop
    $content.hide();

    $trigger.each(function (i) {
        $(this).attr('data-id', i);
    });

    $trigger.click(function () {
        var $span = $('span.content[data-id="' + $(this).attr('data-id') + '"]');
        $content.toggle('fast');
    });
});

<强> Check Fiddle

Answer 2

在您的代码中，您将prod_more_trigger指定为id，它应该是类

<强> HTML

<span class="contentShow" >Dropdown Text Here...</span>
<a class="prod_more_trigger" ><span>More...</span></a>

显示/隐藏循环js问题

2 个答案: