Question

我正在编写一个脚本来根据哈希中的字符串更改哪个元素可见。该脚本将在博客页面上进行，用户可以按类别过滤博客帖子。当用户过滤到某个类别时，该类别将以散列链接的形式附加到URL。

example.com/#categoryA

此时，我希望与每组过滤后的帖子对应的文本框与投资组合一起显示。但是，如果用户没有过滤帖子，或者从过滤帖子过滤到查看所有帖子，则网址中会有一个哈希，如下所示：

example.com/#

在这种情况下，我想要显示一个默认文本框。

我的脚本（下面）执行除了显示默认文本框之外的所有内容，当网址仅以哈希结尾时。

var frag = window.location.href.split("#");
var hashClassChange = function() {
  if (window.location.hash) {
    //If the url hash contains commercial, show the commercial box, hide the last active box
    if (window.location.hash.indexOf('commercial') == 1) {
      $('#box1').addClass("active");
      $('#default').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains hospitality, show the hospitality box, hide the last active box
    else if (window.location.hash.indexOf('hospitality') == 1) {
      $('#box2').addClass("active");
      $('#default').removeClass("active");;
      $('#box1').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains municipal-institutional, show the municipal / institutional box, hide the last active box
    else if (window.location.hash.indexOf('municipal-institutional') == 1) {
      $('#box3').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box4').removeClass("active");
    } 
    //If the url hash contains residential, show the residential box, hide the last active box
    else if (window.location.hash.indexOf('residential') == 1) {
      $('#box4').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
    } 
    //If the url hash does not contain any string, show the default box
    else if (!frag[1].length) {
      $('#default').addClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box3').removeClass("active");
    }
  }
};
// repeats function every 500 milliseconds to check if the url hash has been changed
setInterval(hashClassChange, 500);

如何修复此脚本，以便默认文本框显示网址何时以单个哈希结尾？

我设置了一个codepen（http://codepen.io/ben393/pen/GNVqRX）来显示这一点。

Answer 1

问题是因为当你点击默认shouldChangeCharactersInRange时会func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool { let newLength = (textField.text?.characters.count)! - range.length + string.characters.count if (textField.text?.characters.count)! > 0 && newLength == 0 { textField.text = "" switch textField { .... } } return true }，所以如果在结果中最终点击的那个将会显示，它将不会首先进入内部。

删除window.location.hash部分，它会按照您的预期运作。

empty string

if (window.location.hash) {}

var frag;
frag = window.location.href.split("#");
var hashClassChange = function() {
	
    if (window.location.hash.indexOf('commercial') == 1) {
      $('#box1').addClass("active");
      $('#default').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 
    else if (window.location.hash.indexOf('hospitality') == 1) {
      $('#box2').addClass("active");
      $('#default').removeClass("active");;
      $('#box1').removeClass("active");
      $('#box3').removeClass("active");
      $('#box4').removeClass("active");
    } 

    else if (window.location.hash.indexOf('municipal-institutional') == 1) {
      $('#box3').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box4').removeClass("active");
    } 
    else if (window.location.hash.indexOf('residential') == 1) {
      $('#box4').addClass("active");
      $('#default').removeClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
    } 
    else if (typeof frag[1] == 'undefined' || !frag[1].length) {
      $('#default').addClass("active");
      $('#box1').removeClass("active");
      $('#box2').removeClass("active");
      $('#box3').removeClass("active");
      $('#box3').removeClass("active");
    }
};

setInterval(hashClassChange, 500);

Answer 2

不确定为什么要使用这个frag变量，它永远不会改变。

您可以执行以下操作

if(window.location.hash.length < 2) { ..... }

此外，如果没有任何内容阻止您，您可以使用onhashchange事件，而不是通过setInterval

连续检查

$(window).bind('hashchange', hashClassChange);

Answer 3

您可以检查最后一个字符是否为＃。

var lastChar = location.pathname.substr(location.pathname.length - 1); 
if(lastChar == '#')
 //Your default textbox show hide logic goes here

Answer 4

请尝试使用以下代码：

onBindViewHolder

如果url hash不包含任何字符串，则执行function

4 个答案: