基于URL哈希的更改HTML5数据选项

Question

我有以下div：

<div id="nav-aj"  data-options='{"default":'t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

我想根据我从URL散列得到的内容来更改默认选项的值。

var hash = location.href.substr(location.href.indexOf('#')+1);
alert(hash);

例如，如果哈希值为A，则默认值为t1，否则为t2。

URL结构是http://example.com/page#A，也可以是http://example.com/page#B

我坚持的是改变默认值的值。

Answer 1

试试这个：

function updateDiv(hash) {
    var $div = $('#nav-aj');
    var options = $div.data('options');
    switch (hash) {
        case 'A':
            options['default'] = 't1';
            break;
        case 'B':
            options['default'] = 't2';
            break;
        default:
            option['default'] = 't1';
    }
    $div.attr('data-options', options);
}

$(function () {

    var hash = window.location.hash.split('#')[1]
    updateDiv(hash);

    $(window).on('hashchange', function () {
        updateDiv(window.location.hash.split('#')[1]);
    });

});

另外，由于您的data-options中有一个错误的引号，因此请使用此命令：

<div id="nav-aj" data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'></div>

Answer 2

html

<!-- added `""` around `t1` -->
<div id="nav-aj"  data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

js

var url = window.location.href
, hash = url.split("#")[1] === "A" ? "t1" : "t2";
  $("#nav-aj").data("options").default = hash;

​

var url = "http://example.com/page#B"
, hash = url.split("#")[1] === "A" ? "t1" : "t2";

  $("#nav-aj").data("options").default = hash;
console.log(hash, $("#nav-aj").data("options").default);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav-aj"  data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

​