0

I am using the iCheck plugin to print out some callback data when the checkboxes are checked. I have two arrays, one with ids, and another with names. Their placement in the arrays sync up (array1[0] = 1, array2[0] = greg, 1->greg etc...)

I am trying to pull the id and the name associated with each check box. Here is what I have (the array with the ids is $friend, the array with the names is $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 Portion:

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

When I run this and I start checking off boxes. The ids associated with the checkbox prints out correctly with the correctly associated checkbox. However, the "name" variable I create only prints out the first name in the "$friend_names" array for each checkbox. Do you know why the name variable isn't being updated for each of the checkboxes? Thank you.

4

1 回答 1

0

You need to change your code to reference the checked item (not all items) using this, like this:

   $(document).ready(function(){
        var callbacks_list = $('.callbacks ul');
        $('.facebook-friends-larger input').on('ifChecked', function(event){
            // get the name for only the checked item
            var name = $(this).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) {

            // remove parent li
            $(this).closest('li').remove();
            console.log(this.id);
        });

      });

I've also simplified the uncheck function also by using this.

于 2013-10-11T20:51:50.580 回答