Question

当我在其中一个生成的div中单击SHOW MORE时，在每个div中，页脚div显示选项Test1，Test2。我希望该功能仅适用于div点击。请帮助:(

@foreach ($articles as $article)

    <div class="row">
    <div class="panel-heading">{{$article->title}}</div>
    <div class="panel-body">{{$article->content}}</div>

    <div class="panel-footer">
    <div class="more" onclick="showPortals()">
    Show More</div>
    <div class="other_sources">Other Sources:
                        <a href="">Test 1</a>,
                        <a href="">Test 2</a>
                        <span class="less" onclick="hidePortals()">Show Less</span>
    </div>
    </div>
    </div>

    @endforeach
    <script>
        function showPortals() {
            $(".other_sources").show();
            $(".more").hide();
        }
        function hidePortals() {
            $(".other_sources").hide();
            $(".more").show();
        }
    </script>

Answer 1

更改您的选择器以反映每条记录的ID。

@foreach ($articles as $article)

    <div class="row">
        <div class="panel-heading">{{$article->title}}</div>
        <div class="panel-body">{{$article->content}}</div>

        <div class="panel-footer">
            <div class="more-{{$article->id}}" onclick="showPortals({{$article->id}})">
    Show More</div>
            <div class="other_sources-{{$article->id}}">Other Sources:
                        <a href="">Test 1</a>,
                        <a href="">Test 2</a>
                        <span class="less" onclick="hidePortals()">Show Less</span>
            </div>
        </div>
    </div>

@endforeach
    <script>
        function showPortals(id) {
            $(".other_sources-"+id).show();
            $(".more-"+id).hide();
        }
        function hidePortals() {
            $(".other_sources").hide();
            $(".more").show();
        }
    </script>

Answer 2

您可以通过this对象访问您要点击的对象。您可以将它传递给您的函数：

<div class="more" onclick="showPortals(this)">

<span class="less" onclick="hidePortals(this)">Show Less</span>

一旦你有了代表你的元素的对象（这里，它将分别是div和span），你可以将它包装在$里面以获得一个jQuery对象。然后，您可以在jQuery对象上使用.closest('.panel-footer')来获取面板页脚，并.find(selector)在当前面板页脚中查找相关对象：

    function showPortals(clickedElement) {
        var $panelFooter = $(clickedElement).closest('.panel-footer');
        $panelFooter.find(".other_sources").show();
        $panelFooter.find(".more").hide();
    }
    function hidePortals(clickedElement) {
        var $panelFooter = $(clickedElement).closest('.panel-footer');
        $panelFooter.find(".other_sources").hide();
        $panelFooter.find(".more").show();
    }

但是，onclick="hidePortals(this)"不是推荐的做事方式，因为您将JavaScript与HTML混合在一起。相反，建议您删除onclick="..."处理程序并使用jQuery的.click处理程序，如下所示：

<script>
$(function() {
    $('.more').click(function () {
        var $panelFooter = $(this).closest('.panel-footer');
        $panelFooter.find(".other_sources").show();
        $panelFooter.find(".more").hide();
    });
    $('.less').click(function () {
        var $panelFooter = $(this).closest('.panel-footer');
        $panelFooter.find(".other_sources").hide();
        $panelFooter.find(".more").show();
    });
});
</script>

Answer 3

向每个div添加点击事件：

一种方式：

$( document ).on( "click", 'div', doSomething);

但是如果您正在尝试使用特定ID，则可以更改选择器。

如何将函数仅应用于foreach循环生成的div集合中的特定div？

3 个答案: