是否可以在 HTML 标记中插入您的属性

Is it possible to insert your attribute in the HTML-tag?

本文关键字：插入 属性 HTML 是否      更新时间：2023-09-26

是否可以在HTML标签中插入您的属性，然后引用它？

例如，添加属性组：

first <input type="radio" id="qwerty1" group="1" onClick="myclick();"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick();"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick();"><br>
<script>
function myclick() {
  alert(this.group);
}
</script>

最好使用 W3C 标准属性数据-*阅读有关数据属性的更多信息

function myclick(control)
{
alert($(control).attr("data-group"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
first <input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" data-group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);"><br>

使用 jQuery 的 data（） 函数进行更新 

function myclick(control)
{
alert($(control).data("group"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
first <input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" data-group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);"><br>

对普通 JS 使用getAttribute()方法。

function myclick(input) {
  alert(input.getAttribute("group"));
}

此外，您需要通过函数调用传递当前对象。

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>

小提琴

如果你已经在使用 jQuery，

使用.attr()

如果要使用用户定义的属性，可以使用数据属性。像这样：

<input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);">

然后，要调用此值，您可以使用 .data（） 函数访问它，如下所示。 

$(function(){
  function myclick(el)
  {
    alert($(el).data('group'));
  }
});

最好使用data-*属性作为W3C标准。

<input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>

然后，您可以通过以下方式访问它：

$("#qwerty1").attr("data-group");

并通过以下方式设置：

$("#qwerty1").attr("data-group", "1");

您可以使用jquery单击函数获取属性值，而不是每个单选按钮单击函数

  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
     $("input[name='radio1']").click(function(){  
        var value = $(this).attr("data-group");
        alert(value);
    });
    });
    </script>
    <style>
    .ra_label
    {
    cursor:pointer;
    }
    </style>
    </head>
    <body>
    <label for="qwerty1" class="ra_label">first <input type="radio" id="qwerty1" name="radio1" data-group="1" ></label><br>
    <label for="qwerty2" class="ra_label">second  <input type="radio" id="qwerty2" name="radio1" data-group="2" ></label><br>
    <label for="qwerty3" class="ra_label">third  <input type="radio" id="qwerty3" name="radio1" data-group="3" ></label><br>
    </body>
    </html>

您可以修改单击的处理程序以传递当前 dom 元素对象并使用它来获取与其关联的属性值：

 <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>

.JS：

function myclick(obj){
  alert($(obj).attr("group"));
}

是的，HTML标签中我们自己的属性是可能的。但为了安全起见，请在属性名称前使用"data-"前缀，以避免旧版浏览器出现任何问题。

first <input type="radio" id="qwerty1" data-group="1" onClick="myclick();">

试试这个（完整的Javascript方法）：-

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>
<script>
function myclick(elem) {
  alert(elem.getAttribute('group'));
}
</script>

小提琴

旁注：- 不要以这种方式使用 HTML5 data-* 属性作为data-group="1"，而不是使用group属性。

是的，您可以获得这样的值：-

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>
<script>
function myclick(elem) {
 var value_gp =  $(elem).attr("group");
alert(value_gp);
}
</script>
相关文章：