как заменить div, используя jquery и kendo ui

Question

как заменить div, используя jquery и kendo ui

0

Я делаю несколько тестов, чтобы сделать это, я взял шаблон на странице kendo ui. я очищаю его немного, чтобы получить то, что хочу, и прямо сейчас, у меня есть два div-заголовка на моей странице html. я удаляю его при загрузке страницы, и когда я нажимаю кнопку, я просто хочу удалить текущий заголовок и установить другой. я пробовал много вещей, но ничего не работает правильно, используя 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>

если кто-то может помочь мне сделать это правильно.. спасибо заранее;)

bottus 18 окт. 2013, в 16:52

Источник

Теги:

javascript

jquery

html

kendo-ui

3 ответа

Ещё вопросы

Eric Haack · Answer 1 · 2013-10-19T16-58-00.000Z

Для селекторов классов вам необходимо соблюдать регистр. Вы пытаетесь выбрать элемент с помощью $('.head') Head $('.head'), но имя класса - Head.

Я бы предложил, чтобы вы всегда использовали идентификаторы и классы нижнего регистра для простоты.

В твоем случае,

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

должен работать, однако вы удаляете элемент, который вы пытаетесь заменить $('.Head'):

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

Поэтому, если вы хотите заменить элемент.Head элементом.HeadSearching, вам нужно удалить вторую строку, которая удалит все элементы.HeadSearching.

Если вы сначала хотите скрыть .HeadSearching, тогда вы должны использовать $(".HeadSearching").hide() вместо этого, и если вы хотите его заменить, вы можете просто сделать

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

и наоборот.

GodsCrimeScene · Answer 2 · 2013-10-18T14-34-00.000Z

Это работает для меня без ".".

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

maketest · Answer 3 · 2013-10-18T12-20-00.000Z

Функция replaceWith(newContent) качестве аргумента использует строку HTML. заменить

Вы можете попробовать что-то вроде:

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

Для этой ситуации лучше использовать show/hide div.

Я попробовал оба, но это не похоже на работу.