Question

我遇到以下问题：我似乎无法保留我在每个重复项目中选择的链接。 “这个”这个词正在迷失。 Var event_id适用于每个元素，但var $ something是未定义的？为什么这样，理想情况下我想做一个switch语句但同样的问题，似乎无法让它知道我点击了什么链接以及它周围的元素来执行操作。

更新了完整功能：

function rsvp (selector,function_url) {
$(selector).livequery('click',function(){

   var $select = $(selector).attr('rel');
   var $event_id= $(this).parents('ul.event-options').attr('rel');
        if ($select == "attending") {
        $(this).closest('span.rsvp-status').html("I'm Attending &ndash; <a href='javascript:;' class='remove' rel='remove'>Remove</a>");
        var $something = $(this).parents('ul.event-options').attr('rel');
        alert($something);
        }
        if ($select == "remove") {
        $(this).closest('span.rsvp-status').html("Not Attending &ndash; <a href='javascript:;' class='rsvp' rel='attending'>RSVP?</a>");
        }
        if ($select == "interested") {
        $(this).closest('li').addClass('interested');
        $(this).closest('li').removeClass('not-interested');
        $(this).closest('li').html("You're Interested");
        }

   $.ajax({
        type: "POST",
        url: "/events/set_member/"+function_url,
        data: "event_id="+$event_id,
        beforeSend:  function() {
        $("<span class='notice'>Updating...</span>").prependTo('body');
                },
        complete: function()
                {
                $('span.notice').fadeOut(500);

                }
        });



   });
}
rsvp ('a.rsvp','rsvp');
rsvp ('a.interests','interested');
rsvp ('a.remove','remove');

HTML

<ul class="event-options" rel="<?=$event['event_id']?>">
                        <?php if($event['rsvp_total'] > 0) { ?>
                        <!-- Show Only When Count is Greater than 0 -->
                        <li class="group"><span class="total"><?= $event['rsvp_total']?></span>Interested </li>
                        <?php } ?>

                        <li class="rsvp"><span class="rsvp-status"> Not Attending &ndash; <a href="javascript:;" class="rsvp" rel="attending">RSVP?</a></span></li>
                        <li class="not-interested"> <a href="javascript:;" class="interests" rel="interested"> Interested? </a> </li>
                        <li class="place"><span><a href="<?=$place_path.$event['place_id']?>"><?=$event['place_name']?></a></span></li>
                        <li class="share" rel="<?=$event['event_name']?>">
                        <a class="sharethis"></a>

                        </li>

                    </ul>

Answer 1

var $something = $(this).parents('ul.event-options').attr('rel');

查看您的html并确保在执行.html调用后ul.event-options是父级。它也有助于实际提供html源代码，因为这是一个完全依赖于你的标记的问题。

这不是一个范围问题，因为你不会超越外部范围和livequery内部范围。

Answer 2

<li class="rsvp">
   <span class="rsvp-status"> 
      Not Attending &ndash; 
      <a href="javascript:;" class="rsvp" rel="attending">RSVP?</a>
   </span>
</li>

点击的链接位于span'rsvp-status'中。因此，当您替换相关范围的innerHTML（通过使用jQuery的.html函数）时，它也将删除链接。因此，在html调用之后，$（this）将不再指向一个元素。

Answer 3

我能够解决这个问题，而且有效。

function rsvpNew(selector,function_url) {
 $(selector).livequery('click',function(){
   var select = $(selector).attr('rel');
   var event_id = $(this).parents('ul.event-options').attr('rel');
   element = this;

   switch(select) {
        case "attending":
        $.ajax({
        type: "POST",
        url: "/events/set_member/"+function_url,
        data: "event_id="+event_id,
        beforeSend:  function() {
        $("<span class='notice'>Saving...</span>").prependTo('body');
                                },
        complete: function() {


                        $('span.notice').fadeOut(500);
                        $(element).closest('span.rsvp-status').html("I'm Attending &ndash; <a href='javascript:;' class='remove' rel='remove'>Remove</a>");
                        }


        });


                 break;

jquery范围问题

3 个答案: