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

不要将代码放在head部分，而是放在body末尾的script元素中。

...

<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之前执行。

使用jquery交换div的内容

2 个答案: