jquery - 使用 jquery 换出 div 的内容

Question

我有这段html：

<div id="storeBtn">
    <a href="http://itunes.apple.com/artist" target="itunes_store" class="button">Download on iTunes</a>
</div>

如果我检测到 Android，我想将其更改为：

<div id="storeBtn">
    <a href="http://amazon.com/artist" class="button">Download on Amazon</a>
</div>

这是我的尝试：

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
$("#storeBtn").html("<a href='http://amazon.com/artist' class='button'>Download on Amazon</a>");

}

但没有任何改变。我还尝试了 replaceWith() 而不是 html()。

Answer 1

这段代码在执行前需要等待 Dom 准备好：

$(function() {
    var ua = navigator.userAgent.toLowerCase(); 
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile"); 
    if(isAndroid) { 
        $("#storeBtn").html("<a href='http://amazon.com/artist' class='button'>Download on Amazon</a>"); 

    } 
}

Answer 2

不要将代码放在头部，而是放在正文末尾的脚本元素中。

...

<script>
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    $("#storeBtn").html("<a href='http://amazon.com/artist' class='button'>Download on Amazon</a>");
}
</script>
</body>
</html>

当您的代码位于头部时，它会在将您的 div 添加到 DOM 之前执行。