Question

我遇到了问题。每当点击一个标签时，我都需要显示这个p标签。这些标签与新闻/博客帖子列表相关，因此我需要一个普遍适用的jquery函数，无论每个帖子列出的类如何。

以下是部分博客文章中的示例html代码段。

<p style="display:none;" class="_83214">text goes here </p>
<a class="_83214" href="#">Read More</a>

这是jquery。我为导航做了类似的事情并且工作得很好，所以我无法弄清楚为什么它现在不起作用。

$('a').click(function() {
var myClass = this.className;
$("p." + myClass).css('display', 'initial');
});

修改我得到了它的工作！我将使用.prev方法发布的建议放在原始JSON解析代码中，而不是在其外部。现在它就像一个魅力，我不必使用这些类。

这是最终的工作代码。

<script>

$.getJSON("js/news.json", function(data) {
    $.each(data.posts, function(index, val) {
        var title = val.title;
        var date = val.date;
        var content = val.content;
        var after = content.substring(300);
        if (content.length > 300) {
            content = content.substring(0, 300);
            $("#newscontainer").append('<div><h1>' + title + '</h1><h2>' + date + '</h2><p>' + content + '. . . </p> <p style="display: none;">' + after + '</p><a class="reveal" href="#">Read More</a></div><hr>');
            $('a.reveal').click(function() {
            $(this).prev().css('display', 'initial')});
        } else {
            $("#newscontainer").append('<div><h1>' + title + '</h1><h2>' + date + '</h2><p>' + content + '</p></div><hr>');
        }

    });
});


</script>
<div id='newscontainer'>
</div>

Answer 1

试试这个

$('a').click(function() {
var myClass = $(this).attr("class");
$("p." + myClass).css('display', 'initial');
});

修改

你可以像你说的那样从json修改创建的html

<p style="display:none;" class="_83214">text goes here </p> <a onclick="javascript:displayPost($(this));return false;" class="_83214">Read More</a>

像这样的Javascript

function displayPost(anchor) { var myClass = anchor.attr("class"); $("p." + myClass).css('display', 'initial'); });

Answer 2

如果您需要独立于班级的解决方案，请使用：

$('a').click(function() {
    $(this).prev('p').css('display', 'initial');
});

单击查询时删除属性

2 个答案: