javascript - jQuery 和 jQuery 插件唯一 id 选择

Question

我正在使用https://craftpip.github.io/jquery-confirm/插入。我需要能够选择从数据库动态加载的唯一元素 ID。

 <div><a id="1" href="1">1</a></div>
 <div><a id="2" href="2">2</a></div>
 <div><a id="3" href="2">3</a></div>

Jquery

 $('#1').confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

我的问题是如何在单击时选择元素的 id。我知道如何用简单的 JavaScript 来做到这一点。关于我正在尝试做的事情的更多信息。它是从数据库动态生成的博客条目。每个 div 代表一篇博客文章和 <a>标签代表一个图标，按下该图标将调用 ajax 来删除该博客文章。确认确实要删除后。

在 JavaScript 中我会做这样的事情。

 <div><a  id="1"  href="1" onclick="many(this.id)">1</a></div>
 <div><a  id="2" href="2" onclick="many(this.id)">2</a></div>
 <div><a  id="3" href="2" onclick="many(this.id)">3</a></div>

脚本

   function many(id) 
{
///ajax call 

}

我只是不想要 JavaScript 的默认确认框，所以我要使用 jQuery 插件。

也尝试过这样做，但是 jQuery 无法在 JavaScript 函数内部工作

     function many(id) 
{
    $('#'+id).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });
}

PHP while 循环

<?php  while ($row = $result->fetch()){ ?>
<article id="<?php echo $row['article_id'];?>">
    <div class="body>
       <h1><?php echo $row['title'];?></h1>
       <p><?php echo $row['article'];?></p>
       <div><a id="<?php echo $row['article_id'];?>" class="delete">x</a></div>
    </div>
</article>
<?php }?>

这就是我最终的工作。

$('.someClass').click( function(event) {
    var ele = $(this).attr('rel');
    // ele is the element you clicked on
    $.confirm({
    title: 'Delete!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
         var dataString = "blogpost="+ele;
        $.ajax({
            type: "POST",
            url: "http://localhost/new12/scripts/delete_blog_ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                if(html)
                {

                    $("#aid"+ele).fadeOut('slow', function(){
                        $(this).remove();
                    });

                        return false;
                }
            }
        });
        return true;
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

});

按下确认键后，我进行 Ajax 调用。成功后，它会删除淡出元素，并使用回调函数从 DOM 中删除该元素。感谢所有试图提供帮助的人。

Answer 1

我认为您要问的是如何在单击的元素上调用 .confirm() ？尝试一下，您不需要知道 ID，因为在 jquery 事件处理程序中的回调函数内部，this 指的是触发事件的元素。

$('a').click(function () {
  $(this).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 })
});

但是，我想补充一点，Dan Def 的说法是正确的，即您可能希望将这些元素包装在周围的 div 中，这样您就不会向 <页面上的每个 a 标记。因此，在这种情况下，上面代码片段中的 $('a').click(...) 将为 $('#divId').find('a ').click(...)