0

我正在做一些测试，为此我在 kendo ui 页面上做了一个模板。我清理了一下以获得我想要的东西，现在，我的 html 页面中有两个 div 标题。我在页面加载时删除了一个，当我单击一个按钮时，我只想删除当前标题并设置另一个标题。我已经尝试了很多东西，但似乎没有使用 jquery 正常工作

这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/index.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<!-- 
    Contenu des pages chargées par le paneau left
-->
<body>
    <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"                                

    <p>recherche </p>
    </div>

    <div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
        <p>recherche </p>
    </div>
    <div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
        <p>recherche </p>
    </div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
    <ul data-role="listview" data-type="group"
 <li>Menu
            <ul>
                <li><a href="#drawer-home" data-transition="none">m1</a></li>
                <li><a href="#drawer-starred" data-transition="none">m2</a></li>
                <li><a href="#drawer-drafts" data-transition="none">m3</a></li>
            </ul>
        </li>
    </ul>
</div>
    <div class="Head" data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div class="" data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span id="compagnyName">Demo</span>
            <a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
        </div>
    </header>
</div>
     <div class="HeadSearching" data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
            <select name="country" id="country" data-align="right">
                <option>France</option>
                <option>Angleterre</option>
                <option>Luxembourg</option>
                <option>Espagne</option>
            </select>
        </div>
    </header>
</div>
    <script>
    var app = new kendo.mobile.Application(document.body);
    $('.HeadSearching').remove();
</script>
    <script>
    function changeHead()
    {
        alert('header replace');
        $('.head').replaceWith('.HeadSearching');
    }
    </script>
    </body>
    </html>

如果有人可以帮助我正确地做到这一点..提前感谢;）

4

3 回答 3

0

对于类选择器，您需要尊重大小写。您正在尝试使用 选择元素$('.head')，但类名是Head。

为了简单起见，我建议您始终使用小写的 id 和类。

在你的情况下， 

$('.Head').replaceWith($('.HeadSearching'));

应该可以工作，但是您要删除要替换的元素$('.Head')：

var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();

因此，如果您想将 .Head 元素替换为 .HeadSearching 元素，则需要删除删除所有 .HeadSearching 元素的第二行。

如果你想.HeadSearching最初隐藏，那么你应该使用$(".HeadSearching").hide()，当你想替换它时，你可以简单地做

$(".Head").hide() 
$(".HeadSearching").show()

反之亦然。

于 2013-10-19T18:07:55.497 回答
0

函数replaceWith(newContent)作为参数使用HTML字符串。用。。。来代替

您可以尝试以下方法：

$('.head').replaceWith($('.HeadSearching'));

对于这种情况，使用 show/hide different 可能会更好div。

于 2013-10-18T15:09:14.563 回答
0

没有“。”这对我有用。

$('Head').replaceWith("HeadSearching");
于 2013-10-18T16:54:48.473 回答