チェックボックスがチェックされているときに、iCheck プラグインを使用していくつかのコールバック データを出力しています。2 つの配列があり、1 つは ID で、もう 1 つは名前です。配列内の配置が同期されます (array1[0] = 1、array2[0] = greg、1->greg など...)
各チェックボックスに関連付けられたIDと名前を取得しようとしています。これが私が持っているものです(IDの配列は$friend、名前の配列は$friend_namesです:
<ul class="facebook-friends-larger">
<?php $offset_two=0; ?>
@foreach ($friends as $friend)
<li>
<div class="facebook_friend_large">
<input tabindex="1" type="checkbox" data-name="{{$friend_names[$offset_two]}}" name="friend[]" id="{{$friend}}" value="{{$friend}}" style="display:inline-block;">
<label for="{{$friend}}">
<span class="icon"><a href="http://www.facebook.com/{{ $friend }}"><img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="50" width="50"></a></span>
<span class="icon_text_large"><a href="http://www.facebook.com/{{ $friend }}"><?php echo $friend_names[$offset_two]; ?></a></span>
</label>
</div>
</li>
<?php $offset_two++; ?>
@endforeach
</ul>
Javascript 部分:
<div class="callbacks">
<ul></ul>
</div>
<script>
$(document).ready(function(){
var callbacks_list = $('.callbacks ul');
$('.facebook-friends-larger input').on('ifChecked', function(event){
var name = $('.facebook-friends-larger input').data('name');
callbacks_list.prepend('<li><img src="https://graph.facebook.com/'+this.id+'/picture" alt="" height="50" width="50"><span id="#'+this.id+'">#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + name + '</li>');
});
$('.facebook-friends-larger input').on('ifUnchecked', function(event) {
callbacks_list.find('span#'+ this.id).closest('li').remove();
console.log(this.id);
});
});
</script>
これを実行すると、ボックスのチェックを開始します。チェックボックスに関連付けられた ID は、正しく関連付けられたチェックボックスとともに正しく出力されます。ただし、作成した「name」変数は、各チェックボックスの「$friend_names」配列の最初の名前のみを出力します。チェックボックスごとに name 変数が更新されない理由を知っていますか? ありがとうございました。