Question

这就是我想要的：我有多个<h3>标签用作链接，以显示常见问题解答的答案。此外，我添加了一个表单，以防用户在该页面上没有看到任何感兴趣的问题。表单的链接位于页面底部。现在，当用户点击显示表单链接时，我希望窗口向下滚动到底部。我已经这样做了，但是当我点击任何一个链接时，窗口也会滚动到底部。我希望当用户仅点击窗口滚动的显示表单链接时。

这是我到目前为止所做的：

<body>
<?php
$array = array("link 1","link 2","link 3");
foreach($array as $link)
{
    echo "<h3 class='link'>".$link."</h3>";
    echo "<div>";
    //information to be displayed
    echo "</div>";
}
?>
<h3 class="forms">Show Form</h3>
//form information here
</body>

这是javscript：

<script>
$(document).ready(function(){
    $('h3').click('bind',function() {
        $(this).toggleClass('open').next().slideToggle(500,function(){
            var i = $(this).prop('class');

            if(i == 'forms')
            {
                $("html, body").animate({scrollTop: $(document).height()}, "slow");
            }
        });
    });
});
</script>

我添加了一个警报以验证我的输出，当我点击<h3 class="forms">警报为空时，但当我点击其他警报时，警告显示“链接”。有人可以帮我弄清楚当我点击<h3 class="forms">标签时警报显示为空白的原因吗？

Answer 1

您使用链接类而不是$ link来回显您的LI。

另外，使用

if ($(this).hasClass("forms"))

Answer 2

.prop()实际上只应在访问DOM元素的properties而非属性（例如class或style，width等）时使用。如果你想要这个类，请使用.attr('class')代替（或者像其他人提到的那样，你可以使用.hasClass()来测试（使用jQuery）元素是否具有特定的类。）

跟进.prop vs .class：

<a href="#foo" class="foo-class" id="foolink">Foo Bar link</a>

var a = document.getElementById('foolink'),
    $a = $(a);

$a.prop('href') // like directly calling a.href
$a.prop('id')  // again, like directly calling a.id
$a.attr('class') // where as it's actually a.className

为什么我的$（this）.prop（'class'）不起作用？

2 个答案: