用JS添加视图细节按钮

Adding View Details Button with JS

本文关键字：细节 按钮 视图 添加 JS      更新时间：2023-09-26

我试图使用JS为每个产品添加视图详细信息按钮。我希望它寻找类的每个实例"clsItemBlock"，然后追加clsItemPublished"的html内部的代码下面是在第一个产品上添加多个按钮，而不是一个一个。

在一个完美的世界里，因为我知道每页只有15个产品，我可以让它只检查15次，以防止它不断循环。

我的JS: 

 var divs = document.getElementsByClassName('clsItemBlock');
 for (var i = 0; i < divs.length; i++)
 {
 var iDiv = document.createElement('div');
 iDiv.id = 'detail_button';
 document.getElementsByClassName('clsItemPublished')[0].appendChild(iDiv);
 iDiv.innerHTML = '<a href="http://www.google.com">View Details</a>';
 }
操纵:

http://jsfiddle.net/ptc6ws9o/1/

或者，如果合适的话，您可以使用details和summary标签:http://jsfiddle.net/dorgLr71/

<details>
    <summary>View Details</summary>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin 
        dapibus porttitor libero, eget rutrum nibh laoreet et. 
        Pellentesque porttitor erat ligula, id elementum est egestas 
        eget. Mauris gravida dui ut leo tempor, nec placerat tortor 
        hendrerit.
    </p>
</details>

明白了!

 var divs = document.getElementsByClassName('clsItemBlock');
 for (var i = 0; i < divs.length; i++)
 {
 var iDiv = document.createElement('div');
 iDiv.id = 'detail_button';
 document.getElementsByClassName('clsItemPublished')[i].appendChild(iDiv);
 iDiv.innerHTML = '<a href="http://www.google.com">View Details</a>';
 }
相关文章：