использовать JQuery в цикле Laravel Blade

Question

У меня есть вопрос, касающийся JQuery и Laravel Blade

Например, в My 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

Вы ошиблись в кавычках рядом с идентификатором и, чтобы передать значение того же идентификатора, я использовал функцию сценария 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> 

Answer 2

По моему мнению, лучший способ - добавить класс к кнопке и использовать $(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>

Answer 3

Попробуйте это:

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

Попробуйте это

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

Вы можете попробовать это:

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

Answer 6

Если вы хотите вызвать ту же функцию с любой из кнопок, используя ее идентификатор, вам нужно добавить прослушиватель событий внутри элемента, как показано ниже:

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

Теперь создайте функцию doAlert () внутри вашего JS-файла:

function doAlert(id) {
    alert("Hello");
}

Answer 7

У вас есть "" в блейд-кнопке.Удалите один из "" рядом с чем-то-

. Если вам нужно использовать переменную лезвия Laravel для jQuery / javascript, вы можете вставить значение в 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 8

Я бы создал атрибут данных в каждом элементе, например, data-id или data-number, с идентификатором commom. Как это:

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

Итак, две разные вещи здесь.

Ваш «блейд-код» исполняется при отправке файла с сервера пользователю.

Код 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/

Лучшим решением было бы иметь класс на вашей кнопке и связать ваше событие с этим классом.