jQuery 插件使用 : href or data-url

标签 jquery html jquery-plugins

我正在创建一个 jQuery,它将一些 li 转换为文件夹 block 。

我无法决定哪个更适合插件使用:

href 中的 url

<ul id="folders">
    <li><a href="http://ggg.net/content/?folder=hospital">Hospital Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=school">School Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=house">House Folder</a></li>
</ul>

数据 url 中的 url

<ul id="folders">
    <li data-url="http://ggg.com/content/?folder=hospital">Hospital Folder</li>
    <li data-url="http://ggg.com/content/?folder=school">School Folder</li>
    <li data-url="http://ggg.com/content/?folder=house">House Folder</li>
</ul>

插件启动后的输出HTML:

<div id="folders">
    <div class="row">
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=hospital">
                <i class="fa fa-folder"></i>
                <p>Hospital Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=school">
                <i class="fa fa-folder"></i>
                <p>School Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=house">
                <i class="fa fa-folder"></i>
                <p>House Folder</p>
            </a>
        </div>
    </div>
</div>

最佳答案

When the JavaScript doesn't run , 哪一个更好?链接作为链接还是什么都不做的数据属性?

使用带有真实链接的版本。让你的 JavaScript unobtrusive .使用 progressive enhacement .


就此而言,似乎根本不需要使用 JavaScript 来转换 DOM。只需按照您希望的方式编写 HTML,就可以避免 JavaScript 稍后重写它时出现闪现。

关于jQuery 插件使用 : href or data-url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37181189/

相关文章:

php - laravel 中存在用于电子邮件的 Jquery 验证

javascript - 确定 Javascript 中元素的大小

javascript - Amsul DateTimePicker - 如何取消选择事件日期?

javascript - 可用性日历 jQuery(?)

jquery - Jquery 表插件中的值之和

javascript - JQuery .mouseover 和 .mouseout 改变字体颜色

HTML 输入在 div 中对齐

html - 浏览器呈现的代码而不是页面

jquery - jvectormap:如何在标记标签/工具提示中实现 HTML 而不是简单的字符串?

jquery-plugins - Html5 Canvas 问题,图像尺寸错误