使用Jquery属性通过按钮单击更改div id

Question

尝试使用带有按钮的.click来控制div的ID ...

<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>



<script>
jQuery(document).ready(function($) {
    $('.this').click(function() {
        $(this).attr('#id1', '#id2');
    });
});
</script>

试着学习jquery ...... 单击第二个按钮时，需要将div id="id1"更改为id="id2"。

Answer 1

你几乎拥有它！

使用attr()时，您不需要选择器部分的＃标签符号，除非您真正想要设置ID中的主题标签，否则您不需要它们

jQuery(document).ready(function($) {
    $('.this').eq(1).on('click', function(){
      $('#id1').attr('id', 'id2');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>

Answer 2

attr（）函数的语法要求将属性的名称作为第一个参数，而不是当前值：

jQuery(document).ready(function($) {
    $('.this').click(function() {
        $(this).attr('id', 'id2');
    });
});

P.S。这是一个关键字，你应该尽量不要将它用作类名，这必然会引起混淆。

Answer 3

请参阅代码中的注释以获取解释

jQuery(document).ready(function($) {
    $('.this').click(function() {
        // you need to check if you clicked on the seccond button
        if('2' === $(this).attr('id')) {  // if seccond button
            $('#id1').attr('id', 'id2');  // change the id of id1
        }
    });
});

div {
  width: 100px;
  height: 100px;
}

#id1 {
  background-color: orange;
}

#id2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>

现在因为它不是像这样的代码（maintanability）的最佳方法，你可能想把id2转回id1，你可以这样做：

jQuery(document).ready(function($) {
    $('[data-toggle-id]').click(function() {
        $('.toggle-me').attr(
            'id',
            $(this).attr('data-toggle-id')
        );
    });
});

div {
  width: 100px;
  height: 100px;
}

#id1 {
  background-color: orange;
}

#id2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-toggle-id="id1">
  first
</button>
<button type="button" data-toggle-id="id2">
  second
</button>
 <div id="id1" class="toggle-me"></div>

Answer 4

更改属性参数，如下面的代码所示：

$(document).ready(function(){
$('.this').click(function() {
    $("#id1").attr('id', 'id2');
}); });

Answer 5

<script  src="https://code.jquery.com/jquery-3.2.1.js"   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
<div id="id1"></div>

<script>
jQuery(function() {
    $('#2').click(function() {
       $('#id1').attr('id', 'id2');
    });
});
</script>

Answer 6

下一步更改属性的正确方法是：$("mySelector").attr("attrName","newValueIWant")

我为你做了一个例子，希望它有所帮助：

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

    console.log("Before click:")
    console.log("ID div: "+$("div").attr("id"))
    
    $("button#2").click(function() {
         $("#divId1").attr('id', 'divId2');
         console.log("After click:")
         console.log("ID div: "+$("div").attr("id"))
    });
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="divId1"></div>

＆＃13;

＆＃13;

＆＃13;