文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Jquery为ID、href和aria-控件添加动态值。

问使用Jquery为ID、href和aria-控件添加动态值。
EN

Stack Overflow用户

提问于 2017-11-14 10:20:40

回答 3查看 1.7K关注 0票数 0

我想为属性(href、id、aria-controls)添加动态值，这样我就可以为一个页面在多个地方切换文本。为了供您参考，我在提供的示例代码中的三处添加了“href=”“#0_read_more”、aria-controls="0_read_more“、id="0_read_more”。此外，我还增加了其他两个div部分的值，如示例html代码中给出的值。请帮助我解决这个问题。

提前谢谢。

<div class="image-text">
 <a href="#0_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="0_read_more" class="collapsed">
                  Read More</a>
 <div id="0_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div>
</div>

<div class="image-text">
 <a href="#1_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="1_read_more" class="collapsed">
                  Read More</a>
 <div id="1_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div>
</div>

<div class="image-text">
 <a href="#2_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="2_read_more" class="collapsed">
                  Read More</a>
 <div id="2_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div>
</div>

jquery

css

twitter-bootstrap

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-14 10:47:09

尝尝这个

$(document).ready(function(){
    $('.collapsed').each(function(i){
        var a = '#'+ (i++)+'_read_more';
        $(this).attr('href',a);
    });
    $('.collapsed').each(function(i){
        var b = (i++)+'_read_more'  ;
        $(this).attr('aria-controls',b);
    });
    $('.collapse').each(function(i){
        var c = (i++)+'_read_more' ;
        $(this).attr('id',c);
    });
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="image-text">
    <a data-toggle="collapse" aria-expanded="false" class="collapsed">
                  Read More</a>
    <div class="collapse" aria-expanded="false" style="height: 0px;"></div>
</div>

<div class="image-text">
    <a data-toggle="collapse" aria-expanded="false" class="collapsed">
                  Read More</a>
    <div class="collapse" aria-expanded="false" style="height: 0px;"></div>
</div>

<div class="image-text">
    <a data-toggle="collapse" aria-expanded="false" class="collapsed">
                  Read More</a>
    <div class="collapse" aria-expanded="false" style="height: 0px;"></div>
</div>

票数 0

Stack Overflow用户

发布于 2017-11-14 10:55:27

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(i=0;i<3;i++)
{$("#mydiv").append("<div class='image-text'><a href='#"+i+"_read_more' data-toggle='collapse' aria-expanded='false' aria-controls='"+i+"_read_more' class='collapsed'>Read More</a><div id='"+i+"_read_more' class='collapse' aria-expanded='false' style='height: 0px;'><div></div>");
}     
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>

票数 2

Stack Overflow用户

发布于 2017-11-14 10:34:40

可以使用Jquery为任何DOM元素设置属性，如下所示：

<script>
function setAttributesDynamically(){

  $("SELECTOR").attr("href", "YOUR_URL"); // selector may be Id, class, tagname etc.
  $("SELECTOR").attr("id", "YOUR_ID");
  $("SELECTOR").addClass("CLASS_NAME");

}

</script>

无论您想要什么，都可以打给setAttributesDynamically()。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47283165

复制

相似问题

问使用Jquery为ID、href和aria-控件添加动态值。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery为ID、href和aria-控件添加动态值。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery为ID、href和aria-控件添加动态值。
EN