Question

我正在使用php codeigniter。我将数组中的数据发送到我的视图中。在我看来，我有一个foreach循环，它遍历数组并在我的视图中显示数据。在这个foreach循环中，我正在显示一些动作按钮。

 <?php
     foreach($studentList as $r)
      {
       echo '<tr>';
       echo $r->id;
       echo '</tr>'?>
     <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
     <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
 <?php   
       } ?>

我想要做的是默认显示锁定按钮，当有人点击此按钮时，锁定应该隐藏，并且应该显示解锁按钮。在我的jquery我这样做，但点击单按钮帐户更改整个页面上的按钮。我知道原因是因为我正在使用类来访问元素，所有这些元素都有共同之处，但我还没有想出如何使用id来解决这个问题，这会占用单个元素。

＆＃13;

$('.unlock').click(function() {
  var id = $(this).attr("data-id");
  console.log(id);
  $('.unlock').addClass("hidden");
  $('.lock').removeClass("hidden");
});

＆＃13;

Answer 1

这种轻微的修改可以帮到你。

$('.unlock').click(function(){
        var id = $(this).attr("data-id").split('_')[0];
        console.log(id);
        $(this).addClass("hidden");
        $('[data-id='+id+'_unlock]').removeClass("hidden");
    });

Answer 2

好的，首先，你把锚点放在<tr>之外。这是为了吗？

如果你有这样的代码：

 <?php
     foreach($studentList as $r)
      {
       echo '<tr>';
       echo $r->id;?>
     <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
     <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
 <?php   
       echo '</tr>';
       } ?>

您可以这样做：

$('.unlock').click(function(){
            var id = $(this).attr("data-id");
            console.log(id);
            $(this).parent('tr').find('.unlock').addClass("hidden");
            $(this).parent('tr').find('.lock').removeClass("hidden");
        });

还可以查看有关如何获取兄弟姐妹的信息here，作为查找您正在寻找的元素的替代方法。

Answer 3

首先，您的html在语义上是错误的，tr应包含th或td，具体取决于您要执行的操作。即使浏览器不抱怨坏HTML也不意味着它是正确的。所以，这是一个建议：

假设我们有这个

<table id="myTable">
    <tbody>
    <?php foreach($studentList as $r) { ?>
        <?php echo '<tr><td>'; ?>
        <?php echo $r->id; ?>
        <a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
        <a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
        <?php echo '</td></tr>'; ?>
    <?php  } ?>
    </tbody>
</table>

将单个事件绑定到两个锚点：

$("#myTable tr a").click(function(){
    //save the element for future reference and avoid repeat $(this)
    var elm = $(this),
        id = elm.attr("data-id"),
        elmtoShow = elm.hasClass('unlock') ? '.lock' : '.unlock';

    console.log(id);

    elm.addClass("hidden");

    //we can pass a second param to jQuery to query into 
    //that single element instead the whole document
    $(elmtoShow, this.parentNode).removeClass("hidden");
});

请注意，我在表中添加了id以对所有锚点进行查询，同时还会读取代码中的注释。希望它有所帮助

已点击的ID的标识

3 个答案: