在Laravel刀片循环中使用JQuery

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

例如，在我的

index.blade.php

。。。
@对于（$i=0；$i，这里有两个不同的东西

当文件从服务器发送到用户时，将执行“刀片”代码

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

因此，两者之间实际上没有任何交互作用

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

例如，对于您所编写的内容，您将在一个html文件中使用三个按钮，如果在这些按钮上使用jQuery，您将完成类似的操作
HTML:

请看这里：

更好的解决方案是在按钮上有一个类，并将事件绑定到该类上。
我会在每个元素中创建一个数据属性，如数据id或数据编号，并带有一个通用id。如下所示：

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

您的按钮刀片中有一个“”。请移除某个东西附近的一个”

如果需要将Laravel blade的变量用于jQuery/javascript，可以将该值嵌入Laravel blade中的数据-。可以在脚本文件中使用数据（）来检索该值

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

@for（$i=0；$i如果要使用任何按钮的ID调用相同的函数，则必须在元素中添加事件侦听器，如下所示：

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

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

@对于（$i=0；$i您可以尝试以下方法：

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

试试这个

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

@对于（$i=0；$i请尝试以下操作：

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

@for（$i=0；$i根据我的说法，最好的方法是向按钮添加一个类，并使用
$（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>

用于（$i=0；$iDid您的意思是您想要按钮的值？@lizeshakya这只是一个例子。我只是想了解如何使用html元素上的循环中的值，并使用jquery调用它。我只是不知道如何获取值并在jquery中使用它。很抱歉我的解释。这对您有意义吗？
值
来自哪里？@yOvi这正是我在这里试图弄明白的。我如何在jquery中获取值，以便它能够匹配html元素的id，并且我可以多次使用它。这将导致一个问题，因为三个按钮将实现相同的id。但这不是一个问题，如果您愿意，您可以使用class属性。这里的要点是可以选择jQuery中的所有按钮，但仍有一个属性可以知道哪个按钮是。您可以添加一些解释吗
$('#something-' + value).click(function(){
     let ids = $(this).attr('id');
     let splitted = ids.split('-');
    if (splitted[1]) {
      alert('the value ' + splitted[1]);
    }
  });

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

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

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