2

对于这个显示/隐藏功能，我需要一些关于 JS 的帮助

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

我需要一些 JS 来允许我使用显示/隐藏功能来定位每个单独的实例，不幸的是，我对 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>
4

2 回答 2

3

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

   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');
    });
});

检查小提琴

于 2013-08-01T00:38:02.763 回答
0

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

HTML

<span class="contentShow" >Dropdown Text Here...</span>
<a class="prod_more_trigger" ><span>More...</span></a>
于 2013-08-01T00:41:11.147 回答