Question

我对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元素的数据。谁能指出我可以在其中研究解决方案的地方。这可能不是一个很好的例子，但我只是想在这里表达想法。

我已经对问题进行了编辑，以便更清晰地了解我要实现的目标

非常感谢：）

Answer 1

您在id附近引用了一个错误，并传递了我使用Java脚本函数然后访问其中的值的相同id的值。

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

Answer 2

这里有两件事。

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

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/

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

Answer 3

我会在每个元素中创建一个数据属性，例如data-id或data-number，并带有一个公共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');
     }
});

Answer 4

您的按钮刀片中有“” 。移除某物附近的“” 之一-

如果需要在jQuery / javascript中使用Laravel刀片的变量，则可以将值嵌入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>

Answer 5

如果要使用其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("Hello");
}

Answer 6

您可以尝试以下方法：

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

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

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

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

在Laravel Blade循环中使用JQuery

9 个答案: