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

当我在生成的一个div中单击showmore时，在每个div中，footer div都会显示选项Test1、Test2。我希望该功能只应用于div im单击。请帮忙：(

@foreach（$articles作为$article）
{{$article->title}
{{$article->content}
显示更多
其他来源：
,
少展示
@endforeach
函数showPortals（）{
$（“.other_sources”）.show（）；
$（“.more”）.hide（）；
}
函数hidePortals（）{
$（“.other_sources”）.hide（）；
$（“.more”）.show（）；
}

向每个div添加一个单击事件：

单向：

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

---

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

在每个div中添加一个单击事件：

单向：

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

---

但是，如果您尝试使用特定的id，您可以更改选择器。

更改选择器以反映每个记录的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>

@foreach（$articles作为$article）
{{$article->title}
{{$article->content}
显示更多
其他来源：
,
少展示
@endforeach
功能显示门户（id）{
$（“.other_sources-”+id）.show（）；
$（“.more-”+id.hide（）；
}
函数hidePortals（）{
$（“.other_sources”）.hide（）；
$（“.more”）.show（）；
}

更改选择器以反映每条记录的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>

@foreach（$articles作为$article）
{{$article->title}
{{$article->content}
显示更多
其他来源：
,
少展示
@endforeach
功能显示门户（id）{
$（“.other_sources-”+id）.show（）；
$（“.more-”+id.hide（）；
}
函数hidePortals（）{
$（“.other_sources”）.hide（）；
$（“.more”）.show（）；
}

您可以通过

此

对象访问正在单击的对象。您可以将其传递给您的函数：

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

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

但是，不推荐使用

onclick=“hidePortals（this）”

处理程序，因为您将JavaScript与HTML混合使用。相反，建议您删除

onclick=“…”

处理程序，并使用jQuery的

。单击
处理程序，如下所示：

<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>


$（函数（）{
$（'.more'）。单击（函数（）{
var$panelFooter=$（this）.closest（'.panel footer'）；
$panelFooter.find（“.other_sources”）.show（）；
$panelFooter.find（“.more”）.hide（）；
});
$（'.less'）。单击（函数（）{
var$panelFooter=$（this）.closest（'.panel footer'）；
$panelFooter.find（“.other_sources”）.hide（）；
$panelFooter.find（“.more”）.show（）；
});
});
您可以通过
此
对象访问正在单击的对象。您可以将其传递给您的函数：

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

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

但是，不推荐使用
onclick=“hidePortals（this）”
处理程序，因为您将JavaScript与HTML混合使用。相反，建议您删除
onclick=“…”
处理程序，并使用jQuery的
。单击
处理程序，如下所示：

<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>


$（函数（）{
$（'.more'）。单击（函数（）{
var$panelFooter=$（this）.closest（'.panel footer'）；
$panelFooter.find（“.other_sources”）.show（）；
$panelFooter.find（“.more”）.hide（）；
});
$（'.less'）。单击（函数（）{
var$panelFooter=$（this）.closest（'.panel footer'）；
$panelFooter.find（“.other_sources”）.hide（）；
$panelFooter.find（“.more”）.show（）；
});
});
将当前元素发送到方法

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

将当前元素发送到方法

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

但是在footer div中有锚定标记，但是在footer div中有锚定标记如果它们特定于某个类，则可能应该使用id而不是类article@LiverpoolCoder我正在考虑删除，因为你的答案要好得多。你的解决方案在某种程度上更好，因为如果元素或der是变更的，如果id是特定于类的，那么您可能应该使用id而不是类article@LiverpoolCoder我正在考虑删除，因为您的答案要好得多。您的解决方案在某种程度上更好，因为如果元素顺序更改，我的解决方案将停止工作
el
，并且
element
应具有相同的名称？
el
和
element
应该有相同的名称吗？非常感谢你@Dzmitry。我一直在努力解决这个问题。非常感谢你@Dzmitry。我一直在努力解决这个问题