获取 PHP 生成的兄弟 div id答案

【问题标题】：Get sibling div id generated by PHP获取 PHP 生成的兄弟 div id
【发布时间】：2016-05-15 21:41:40
【问题描述】：

我有一种博客页面的 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>

【问题讨论】：

谢谢你们的帮助。

标签： javascript jquery html css

【解决方案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
});

【讨论】：

【解决方案2】：

您的 id 就在那里，您可以使用 blogReadMore('<?php echo $id; ?>') 生成它。但是您不需要 id，您的按钮位于您需要展开的内容中，因此您也可以通过这种方式查找它。

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

一个答案，但真正的答案是“这不是生成代码的好方法。生成 HTML，然后附加 JS 事件处理”。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

有一个比 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> 是我们感兴趣的按钮的直接兄弟。根本不需要选择器！

【讨论】：