Question

我有一些博客页面的HTML代码。下面 - 1个帖子的代码及其CSS缩减的高度。这将是博客页面上的很多帖子。我想通过点击“阅读更多”按钮查看特定页面的所有内容。带有博客内容的Div具有动态ID，它通过PHP从数据库获取。

如何通过点击“阅读更多”按钮更改类“blog_article”的div高度？

我想过使用JS / Jquery但是无法获得“blog_article”div的id。或者也许有更好的方法来做到这一点？

<div class="blog_article_wrapper">  
  <div class="blog_article" id="<?php echo $id; ?>">    
    <!--Some content-->
   </div> 

    <div class="blog_article_read_more">
        <button onclick="blogReadMore()">Read More</button>
    </div>
 </div>

Answer 1

但无法获取“blog_article”div
的ID

你为什么不能？：

<button onclick="blogReadMore(<?php echo $id; ?>)">Read More</button>

或者，如果它是一个字符串：

<button onclick="blogReadMore('<?php echo $id; ?>')">Read More</button>

然后blogReadMore()引用了id：

function blogReadMore(id) {
    // use the id to identify the element and modify it however you want
}

相反，由于您标记了jQuery，您可以从按钮单击遍历DOM以确定元素，而根本不需要任何id。像这样：

$('.blog_article_read_more button').click(function () {
    var article = $(this).closest('.blog_article_wrapper').find('.blog_article');
    // do whatever you like with the article
});

Answer 2

比Azim的答案更直接，但基于相同的想法：

我仍然会使用read_more类，尽管实际上并不需要。我将假设这样一个类应用于按钮。

$('.read_more').click(function(){
    var blog_article = $(this).parent().parent().find('.blog_article');
    blog_article.css('height', '100px'); //change height here
});

在这种情况下，我使用.parent()方法从被点击的项目中获取父对象，而不是依赖.closest()。需要两次调用.parent()，因为<button>位于<div>内，我们需要该div 的父才能向下钻取。

可替换地：

$('.read_more').click(function(){ var blog_article = $(this).parent().prev(); blog_article.css('height', '100px'); //change height here });

因为按钮的父<div>是我们感兴趣的父母的直接兄弟。根本不需要选择器！

Answer 3

你有id，你可以使用blogReadMore('<?php echo $id; ?>')生成它。但是你不需要 id，你的按钮就在你需要扩展的东西里面，所以你也可以这样查看。

您使用了相当古老的JS事件处理技术，因此不会像现代代码那样干净（它不会使用onclick和其他东西，但添加了在设置DOM之后监听事件，但您可以通过onclick="blogReadMore(this)"以便blogReadMore函数知道触发它的元素。然后你只需要查看element.parentNode的序列，直到找到带有element.classList.contains('blog_article')===true的元素（两者都有相同的jQuery调用）

答案的排序，但真正的答案是＃34;这不是生成代码的好方法。生成HTML，然后附加JS事件处理＆＃34;。

Answer 4

使用read more按钮的类，比read_more更像<button class="read_more">Read More</button>。并使用以下jquery。

$('.read_more').click(function(){
    var blog_article = $(this).closest('.blog_article_wrapper').find('.blog_article');

    blog_article.height(100); //change height here
});

获取PHP生成的兄弟div id

4 个答案: