Question

我有一个填充表，其中包含数据库中的数据。代码如下：

echo '<td style="width:5%;padding:0;">
    <div class="statusimg" id="statusimg-id'.$bookingid.'" style="position:absoulte; white-space: nowrap;" >'.$statusimg.'</div>

    <div id="booking-status" style="display:none">
        <p>Job #'.$bookingid. ' for '. $date_today.'</p>
        <p>Contact for '.$row['name'].' : <a href="tel:'. $row['phone_number'].'">'.$row['phone_number'].'</a></p>
        <div id="select_status">
            <a href="index.php?BookingID='.urlencode($row['id']).'&BookingStatus='.urlencode($booking_status_2).' " id="job_confirmed"><span>Confirm job</span><img src="icons/main/key_check_yellow.png" alt="x" width="24px" height="24px"></a>
            <a href="index.php?BookingID='.urlencode($row['id']).'&BookingStatus='.urlencode($booking_status_3).' " id="job_rogered"><span>Roger job</span><img src="icons/main/key_check_green.png" alt="x" width="24px" height="24px"></a>
        </div>
        <p>Please roger the job at least 60 minutes before the pick up time</p>
    </div>
</div>
</td>';

这是我的jQuery：

;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('.statusimg').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#booking-status').bPopup({
            });
        });

    });

})(jQuery);

现在，当我点击statusimg时，它会打开每行的预订状态，但会按每行的升序打开它们。

我需要一种方法只打开对应于行中点击链接的div。

Answer 1

使用siblings()方法调用正确的预订状态。 https://api.jquery.com/siblings/

// Triggering bPopup when click event is fired
$(this).siblings('#booking-status').bPopup({
});

您还可以尝试更基本的版本。

$('.statusimg').click(function(e) {
  $(this).siblings('#booking-status').bPopup();
});

在不知道bPopup();正在做什么的情况下，很难说为什么这只能运作一次。

弹出动态jQuery

1 个答案: