javascript - 有没有办法用 jQuery 动态更改导航栏文本

Question

<div id="page1" data-role="page">
    <div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
    <div data-role="content" style="margin:0; padding:0;">
        <div id="wowslider-container1" style="padding-bottom:10px;">
            <div class="ws_images">
                <ul>
                    <li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
                    <li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
                    <li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
                </ul>
            </div>
            <div class="ws_shadow"></div>
        </div>
        <script type="text/javascript" src="engine1/wowslider.js"></script>
        <script type="text/javascript" src="engine1/script.js"></script>
        <div style="padding-bottom:5px;">
            <img src="img/Wedding in a Box.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Flutter My Shutter.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Brock's riverside.png" style="width:100%!important;">
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" class="ui-nodisc-icon">
            <ul>
                <li><a href="#" class="ui-icon-home ui-btn-icon-top ui-btn-active">Home</a></li>
                <li><a href="#" class="ui-icon-calendar ui-btn-icon-top">Events</a></li>
                <li><a href="#" class="ui-icon-search ui-btn-icon-top">Vendors</a></li>
                <li><a href="#map" class="ui-icon-location ui-btn-icon-top">Map</a></li>
                <li><a href="#" onClick="loginCheck()" class="ui-icon-user ui-btn-icon-top">Profile</a></li>
            </ul>
        </div>
    </div>
</div>

我想知道是否有一种方法可以如上所示更改“vendor ”菜单项，并在 pageinit 函数中使用 jQuery 将文本和图标更改为不同的内容？

Answer 1

这将找到其中包含字符串 Vendors 的 a 元素，并替换该字符串。然后它可以删除图标的类并将其替换为其他内容。

$("a:contains('Vendors')").text('Different String');
$("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');