在 Laravel Blade 循环中使用 JQuery

Posted 2023-03-14

【中文标题】在 Laravel Blade 循环中使用 JQuery

【英文标题】：use JQuery in Laravel Blade loop

【发布时间】：2019-11-11 17:58:58

【问题描述】：

我有一个关于 JQuery 和 Laravel Blade 的问题

例如在我的index.blade.php

...

@for($i=0; $i<3; $i++)
  <div id="something-$i" data-value=" $i "></div>
@endfor

<script>
  $( "#something-"+value ).data(value);

</script>
...

有没有人知道如何在上面的 JQuery 示例中获取“值”，以便我可以获取每个 html 元素的数据。谁能指出我可以在哪里研究解决方案。这可能不是一个很好的例子，但我只是想在这里得到这个想法。

我已经编辑了问题，以便更清楚地了解我想要实现的目标

非常感谢:)

【问题讨论】：

你的意思是你想要按钮的值？

@lizeshakya 这只是一个例子。我只是想了解如何在 html 元素上使用循环中的值并使用 jquery 调用它。我只是不知道如何获取值并在 jquery 中使用它。对不起我的解释。这对你有意义吗？

value 来自哪里？

@yovie 这正是我想在这里弄清楚的。如何获取 jquery 中的值，以便它可以匹配 html 元素的 id 并且我可以多次使用它。

【参考方案1】：

这里有两个不同的东西。

当文件从服务器发送给用户时，您的“刀片”代码会被执行。

jQuery 代码直接在用户设备上执行和使用。

因此两者之间实际上没有任何交互。

jQuery 与刀片模板创建的 html 交互。

例如，对于您所编写的内容，您最终会在一个 html 文件中使用三个按钮，而要在这些按钮上使用 jQuery，您最终会执行类似的操作 HTML：

<button id="something-1">BUTTON 1</button>
<button id="something-1">BUTTON 2</button>
<button id="something-1">BUTTON 3</button>

jQuery :

$('[id^="something-"]').click(function() 
    alert('Hello');
);

在这里查看：https://jsfiddle.net/8eLu71n3/1/

更好的解决方案是在您的按钮上设置一个类并将您的事件绑定到该类上。

【参考方案2】：

我会在每个元素中创建一个数据属性，例如 data-id 或 data-number，并带有一个 commom id。像这样：

@for($i=0; $i<3; $i++)
<button id="myButton" data-id= $i ></button>
@endfor

然后在javascript中，我会这样做：

$("#myButton").each(function(button)
     button.click = function() 
        alert('hello');
     
);

【讨论】：

这会导致问题，因为三个按钮会实现相同的id。

但这不是问题，如果需要，可以使用类属性。这里的重点是您可以选择 jQuery 中的所有按钮，但有一个属性可以知道哪个按钮是。

【参考方案3】：

您的按钮刀片中有一个 ""。删除某物附近的 "" 之一-

如果需要将 Laravel 刀片的变量用于 jQuery/javascript，可以将值嵌入到 Laravel 刀片的 data- 中。您可以在脚本文件中使用 data() 来检索值。

@for($i=0; $i<3; $i++)
<button id="something-" $i " data-value="$i" class="something"></button> 
@endfor

// Using cdn jQuery version 3.4.1 
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script>

 $( ".something" ).click(function() 
   var value = $(this).data('value');
   alert( value + ' button is clicked' );
);

</script>

【参考方案4】：

如果你想使用它的 ID 从任何按钮调用相同的函数，那么你必须在元素内添加事件侦听器，如下所示：

@for ($i = 0; $i < 3; $i++)
    <button id="something-" $i  onclick="doAlert(this.id);">Button $i</button>
@endfor

现在在你的 JS 文件中创建 doAlert() 函数：

function doAlert(id) 
    alert(id);

【参考方案5】：

你在 id 附近引用错误，为了传递相同 id 的值，我使用了 java 脚本函数，然后访问了其中的值。

@for($i=0; $i<3; $i++)
<button id="something- $i " onclick="doSomething( $i )"></button>
@endfor

<script>
function doSomething(value) 
    $.( "#something-"+value ).click(function() 
        alert( "Hello" );
    );

</script> 

【讨论】：

你能补充一些解释吗

【参考方案6】：

你可以试试这个：

$('#something-' + value).click(function()
     let ids = $(this).attr('id');
     let splitted = ids.split('-');
    if (splitted[1]) 
      alert('the value ' + splitted[1]);
    
  );

【参考方案7】：

试试这个

    @for($i=0; $i<3; $i++)
      <button class="something_class" button_value="$i" id="something- $i "></button>
    @endfor

    <script>
      $( ".something_class" ).click(function() 
           let button_value = $(this).attr("button_value");
           alert( button_value  );
      );
    </script>

【参考方案8】：

试试这个：

@for($i=0; $i<3; $i++)
  <button class="button-list" custom-value=" $i "></button>
@endfor

<script>
  $( ".button-list" ).click(function() 
    var custom_value = $(this).attr('custom-value');
    alert(custom_value);
  );
</script>
...

【参考方案9】：

根据我的说法，最好的方法是向按钮添加一个类并使用$(this) 来引用当前的 DOM 对象。

@for($i=0; $i<3; $i++)
  <button id="something- $i " class='button_click'></button>
@endfor

<script>
  $( ".button_click" ).click(function() 
    console.log($(this).val());
    console.log($(this).attr('id'));
    alert( "Hello" );
  );
</script>