如何让书签化的散列链接与jQuery更改函数一起工作？

mefy6pfw 于 2023-11-17 发布在 jQuery

关注(0)|答案(2)|浏览(124)

使用这个jQuery更改函数来获得书签哈希链接的最简单方法是什么，即能够使用example.com/#theme1或example.com/#theme2链接？
jQuery #theme-selector改变了哈希值，并显示/隐藏了与类相关的div，即.theme1或.theme2，但是当从书签链接转到example.com/#theme1时，所有的div都会显示出来。
此外，如果我手动刷新一个带有哈希值的URL，即example.com/#theme1，哈希值仍然是#theme1，但所有的div都会显示出来。
SO上的其他一些问题涉及可书签散列，但它们已经有很多年的历史了，而一些看起来有用的库也有十年的历史了，比如https://github.com/asual/jquery-address
不幸的是，在这里运行代码片段不会显示浏览器散列更改，JSFiddle也不会。

jQuery(document).ready(function(jQuery){
    
        jQuery("#theme-selector").change(function () {
    
        var urlhash = document.getElementById('theme-selector').value;
    
        window.location.hash = urlhash;
    
    });
    
    
    jQuery("#theme-selector").change(function () {
    
    themeclass = window.location.hash.substr(1);
    
    jQuery('.blockcontent').hide();
    jQuery('.' +themeclass).show();
    jQuery('.theme-header').hide();
    jQuery('.' +themeclass).show();
    
        });
    
    });

.blockcontent {
    display:inline-block;
    width:150px;
    border:1px solid #acacac;
    }
    
    .theme-header {
    display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <label for="theme-selector">Filter by Theme:</label>
    
    <select name="theme-selector" id="theme-selector" value="">
    
    <option value="all-themes">All Themes</option>
    <option value="theme1">Theme 1</option>
    <option value="theme2">Theme 2</option>
    <option value="theme3">Theme 3</option>
    
    </select>
    
    <br>
    
    <div id="theme-description-container">
    <div class="theme1 theme-header">Theme 1 Description</div>
    <div class="theme2 theme-header">Theme 2 Description</div>
    <div class="theme3 theme-header">Theme 3 Description</div>
    </div>
   
    <br>
    
    <div class="blockcontent all-themes theme1">
    theme1<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    </div>
    
    <div class="blockcontent all-themes theme2">
    theme2<br><br>sed do eiusmod tempor incididunt sed do eiusmod eiusmod
    </div>
    
    <div class="blockcontent all-themes theme3 theme2">
    theme2 and theme3<br><br>consectetur adipiscing elit,consect adipiscing elit, 
    </div>
    
    <div class="blockcontent all-themes theme3">
    theme3<br><br>consectetur adipiscing elit,consect etur adipiscing elit, 
    </div>

jquery

来源：https://stackoverflow.com/questions/77354364/how-can-i-get-bookmarked-hash-links-to-work-with-a-jquery-change-function

2条答案

按热度按时间

pu82cl6c1#

您需要使用$(location).attr('hash');来获取当前哈希值。
我写了我的代码。
注意：您可以使用$(this)而不是document.getElementById('theme-selector')。
编辑：更改事件处理程序应在调用.trigger（'change'）之前定义

jQuery(document).ready(function(jQuery) {

  
  jQuery("#theme-selector").change(function () {
    var urlhash = document.getElementById('theme-selector').value;
    window.location.hash = urlhash;

  });

 jQuery("#theme-selector").change(function () {

  themeclass = window.location.hash.substr(1);

  jQuery('.blockcontent').hide();
  jQuery('.' +themeclass).show();
  jQuery('.theme-header').hide();
  jQuery('.' +themeclass).show();

 });
 
   var urlhash = $(location).attr('hash'); // current hash
  
  // we check if current hash exist
  if (urlhash && urlhash !== "") {
     urlhash = urlhash.replace('#', ''); // remove # from hash
     
     // trigger change on selected option corresponding to hash
     $("#theme-selector option[value='" + urlhash + "']").prop("selected",true).trigger("change");
  }

});

.blockcontent {
    display:inline-block;
    width:150px;
    border:1px solid #acacac;
    }
    
    .theme-header {
    display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <label for="theme-selector">Filter by Theme:</label>
    
    <select name="theme-selector" id="theme-selector" value="">
    
    <option value="all-themes">All Themes</option>
    <option value="theme1">Theme 1</option>
    <option value="theme2">Theme 2</option>
    <option value="theme3">Theme 3</option>
    
    </select>
    
    <br>
    
    <div id="theme-description-container">
    <div class="theme1 theme-header">Theme 1 Description</div>
    <div class="theme2 theme-header">Theme 2 Description</div>
    <div class="theme3 theme-header">Theme 3 Description</div>
    </div>
   
    <br>
    
    <div class="blockcontent all-themes theme1">
    theme1<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    </div>
    
    <div class="blockcontent all-themes theme2">
    theme2<br><br>sed do eiusmod tempor incididunt sed do eiusmod eiusmod
    </div>
    
    <div class="blockcontent all-themes theme3 theme2">
    theme2 and theme3<br><br>consectetur adipiscing elit,consect adipiscing elit, 
    </div>
    
    <div class="blockcontent all-themes theme3">
    theme3<br><br>consectetur adipiscing elit,consect etur adipiscing elit, 
    </div>

赞(0）回复(0）举报 2023-11-17

qjp7pelc2#

我遇到过很多次这个问题。这是我们使用的解决方案。它将处理<select>的更改，并将触发更改，如果主题是直接链接或书签页面等url的一部分。希望它更简洁和高效一点：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .blockcontent {
                display: inline-block;
                width: 150px;
                border: 1px solid #acacac;
            }
    
            .theme-header {
                display: none;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <label for="theme-selector">Filter by Theme:</label>
        
        <select name="theme-selector" id="theme-selector" value="">
            <option value="all-themes">All Themes</option>
            <option value="theme1">Theme 1</option>
            <option value="theme2">Theme 2</option>
            <option value="theme3">Theme 3</option>
        </select>
        <br>
        <div id="theme-description-container">
            <div class="theme1 theme-header">Theme 1 Description</div>
            <div class="theme2 theme-header">Theme 2 Description</div>
            <div class="theme3 theme-header">Theme 3 Description</div>
        </div>
        <br>
        <div class="blockcontent all-themes theme1">
            theme1<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        </div>
        <div class="blockcontent all-themes theme2">
            theme2<br><br>sed do eiusmod tempor incididunt sed do eiusmod eiusmod
        </div>
        <div class="blockcontent all-themes theme3 theme2">
            theme2 and theme3<br><br>consectetur adipiscing elit,consect adipiscing elit,
        </div>
        <div class="blockcontent all-themes theme3">
            theme3<br><br>consectetur adipiscing elit,consect etur adipiscing elit,
        </div>
        <script>
            $(document).ready(function () {
                // Add event listener to theme-selector <select> element
                // Pass in the event object as 'e' variable
                $("#theme-selector").change(function (e) {
                    // themeclass is the option selected value
                    const themeclass = e.target.value;
                    window.location.hash = themeclass;
                    // Select both classes at once. 
                    // No need to do them separately as this involves more DOM searches which is inefficient
                    $('.blockcontent, .theme-header').hide();
                    $('.' + themeclass).show();
                });
        
                // Now that you have an event listener set up handle direct links/bookmarked pages
                const urlhash = window.location.hash;
                if (urlhash !== "") {
                    // Use jQuery val() method to select <option value="urlhash">
                    // Trigger change on that value
                    $('#theme-selector').val(urlhash.slice(1)).trigger('change');
                }
            });
        </script>
    </body>
</html>

字符串

赞(0）回复(0）举报 2023-11-17

我来回答

如何让书签化的散列链接与jQuery更改函数一起工作？

2条答案

相关问题

热门标签

最新问答