Question

基本上，我试图在foreach onclick的每个div中放置一个可点击的星形，方法是通过更改css类，将其从黑色变为橙色，然后再次单击，使其像永远一样变回黑色，但它仅适用于第一个div foreach，这也是我的风格：

-PrunWorkingDir=<my-working-dir>

         <head>
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

您必须使用类更改恒星的标识符。

使用ID时，它是用来标识唯一的特定对象。

使用类时，可以对所有元素应用相同的操作，然后仅使用特定元素。

类似这样的东西：

<div class="column">
    <span class="foo fa fa-star"></span> 
    <h2>{{$post->title}}</h2>
    <img src={{$post->url}}  />
</div>

然后，当有人单击span.foo元素时，您只需分配此功能即可。

$(".foo").click(function() {
    $(this).addClass("checked");
});

编辑

要检查是否喜欢它，可以使用以下选中的类：

$(document).on("click", ".foo", function() {
    if($(this).hasClass("checked")) {
        $(this).removeClass("checked");
    } else {
        $(this).addClass("checked");
    }
});

如果您的元素是动态生成的，我将$(".foo").click()更改为$(document).on("click", ".foo", ...，这样该功能将影响所有元素。

请检查您在此处发布代码的方式，因为这有点令人困惑。

编辑2-Codepen示例

我在CodePen上使用与您的代码相似的结构（经过调整）创建了这个小示例。请检查一下。

Answer 2

我不确定这是否是您想要的，但是最好删除ID，因为它应该是唯一的。您可以从跨度中删除onclick并执行以下操作：

$("body").on("click", ".foo", function() {
  $(this).addClass("checked");
});

jQuery函数仅适用于laravel中foreach的第一个元素

2 个答案: