点击按钮时使用jQuery添加ID

Question

大家好，我想在jquery中单击按钮时获取其ID，并将其附加到href底部。我尝试使用.append()方法，但未成功。

我有以下代码：

<button class="btn1" id="5" type="button">click me</button>
<button class="btn1" id="3" type="button">click me</button>

<a href="www.example.com/{id]" class="dellink">Delete</a>

这个可以工作，但我只需要获得按钮的 ID。

$("btn1").click(function(){
    $(".delllink").attr("href", "http://www.example.com/");
}); 

- htmlpower

---

朋友，JS / jQ在哪里？ - zer00ne

Answer 1

如果你想保留元素中的URL，可以按照以下方式进行操作。

$("button.btn1").click(function() {
    var url = $("a.dellink").attr("href");
    url = url.substr(0, url.lastIndexOf("/") + 1) + $(this).attr("id");

    $("a.dellink").attr("href", url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1" id="5" type="button">click me</button>
<button class="btn1" id="3" type="button">click me</button>
<a href="www.example.com/{id}" class="dellink">Delete</a>

否则，您也可以更静态地完成它：

$("button.btn1").click(function() {
    $("a.dellink").attr("href", "http://www.example.com/" + $(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1" id="5" type="button">click me</button>
<button class="btn1" id="3" type="button">click me</button>
<a href="www.example.com/{id}" class="dellink">Delete</a>

- eisbehr

Answer 2

希望这对你有用：

希望这对你有用：

$('button').click(function() { 
    var id = $(this).attr('id');
   $("a").prop("href", "www.example.com/"+id);
});

- Sunny

---

我知道它能工作，但应该使用“attr”，因为“href”是一个属性而不是一个属性。 :) - eisbehr

prop 和 attr 的区别在于，attr 获取 HTML 属性，而 prop 获取 DOM 属性。 - Sunny

使用 prop 比使用 attr 更快，因为它更新 DOM 而不是修改 HTML。 - Sunny

Answer 3

请尝试这个。

<script>
    $(document).ready(function(){
        $(".btn1").click(function(){
            var href = "www.example.com/" + $(this).attr("id");
            $(".dellink").attr("href", href);
        });
    });
</script>

- Preethi Mano

Answer 4

使用jQuery的attr方法，您可以在单击按钮时获取按钮的ID，还可以使用相同的attr方法替换href属性。

attr的文档可在此处here获得。

以下代码将解决您的问题。

$('.btn').click(function() {
    var id = $(this).attr('id'); //getting id using jQuery
    $('.dellink').attr('href', 'http://www.example.com/' + id); //changing the href attribute using jQuery.
});

- murli2308

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - Jonathan Lam

@LambdaNinja 谢谢。下次会记得添加描述。 - murli2308

Answer 5

HTMl

<a href="www.example.com/" class="dellink">Delete</a>

JS

$("button").click(function(){
    var id = $(this).attr('id');

   // now for url either use static like this
   var p_href = "www.example.com/";

   //or do dynamic 
   var p_href = document.location.hostname+"/";
   $("a.dellink").attr("href", p_href + id);
});

工作的Fiddle

- Amar Singh

---

但是你的URL将会是www.example.com/{id]5，然后是www.example.com/{id]53等等。;) - eisbehr

@eisbehr，我已经发布了fiddle并从href中删除了那个东西，我也会发布那段代码。 - Amar Singh

@eisbehr：已更改 - Amar Singh

好的，很好。还有，也要改变你的fiddle。;) - eisbehr