Включение JavaScript-функции в jQuery

В основном я скрестил два скрипта вместе. Один из них - jQuery; создает «активную» функцию. Но функция слоя hide/display находится в Javascript, и для меня очень много кода, я думаю, что это должно быть возможно, чтобы свести его к чему-то простому и эффективному с jQuery.

FYI, я только начал с Javascript и jQuery.

Помощь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JSMenu</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript" language="JavaScript"> 
function HideLayer(d) { document.getElementById(d).style.display = "none"; } 
function DisplayLayer(d) { document.getElementById(d).style.display = "block"; }; 

$(function() { 
    $('div.menuitem').click(function() { 
     var $this = $(this); 
     $('.active').removeClass('active'); 
     $this.addClass('active'); 
    }) 
}); 
</script> 

<style> 
#menuholder {width:100px; float:left; border-bottom:solid thin #000;} 
.menuitem {border-top:solid thin #000; border-left:solid thin #000; border-right:solid thin #000;} 
.menuitem:hover {cursor:pointer; color:#555} 
.active {font-weight:bold; color:#000} 
.active:hover {color:#000} 
#layerholder {float:left; margin-left:20px; width:50px; height:50px; border:solid thin;} 
.layer {padding-left:3px; font-size:36px; display:none;} 
</style> 

</head> 

<body> 

<div id="menuholder"> 
<div onClick="DisplayLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');HideLayer('fourthLayer')" class="menuitem">Item 1</div> 
<div onClick="HideLayer('firstLayer');HideLayer('thirdLayer');HideLayer('fourthLayer');DisplayLayer('secondLayer')" class="menuitem">Item 2</div> 
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('fourthLayer');DisplayLayer('thirdLayer')" class="menuitem">Item 3</div> 
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');DisplayLayer('fourthLayer')" class="menuitem">Item 4</div> 
</div> 

<div id="layerholder"> 
<div class="layer" id="firstLayer">1</div> 
<div class="layer" id="secondLayer">2</div> 
<div class="layer" id="thirdLayer">3</div> 
<div class="layer" id="fourthLayer">4</div> 
</div> 
<div style="clear:both;"></div> 

</body> 
</html>

источник

2011-05-22 Eilenna

jQuery - это среда JavaScript, а не отдельный язык. –

Да, я знаю. Это все; Я хочу «фреймворк» функцию Javascript =) Morph это вместе с функцией jQuery. Предпочтительно удалить скрипт из html. Прямо сейчас после «onClick» очень много кода. – Eilenna

jQuery - это отдельный API. Очевидно, что OP хочет преобразовать собственные вызовы API DOM в jQuery. – user113716

Вы можете изменить HTML для:

<div id="menuholder"> 
    <div rel="firstLayer" class="menuitem">Item 1</div> 
    <div rel="secondLayer" class="menuitem">Item 2</div> 
    ... 
</div>

И затем использовать этот JQuery:

$('.menuitem').click(function() { 
    $('.layer').hide(); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    $('#' + $(this).attr('rel')).show(); 
});

Это также не 100% совершенны, как rel не является допустимым атрибутом для div элементов , Вы должны рассмотреть возможность изменения div s на a элементов (и использовать атрибут href), который имеет преимущество, которое браузер также перескакивает на связанный элемент.

DEMO

Update: Если вы решили пойти со ссылками, это было бы:

<div id="menuholder"> 
    <a href="#firstLayer" class="menuitem">Item 1</div> 
    <a href="#secondLayer" class="menuitem">Item 2</div> 
    ... 
</div>

$('.menuitem').click(function() { 
    $('.layer').hide(); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    $(this.href).show(); 
});

источник

2011-05-22 01:18:23

Почему бы просто не использовать идентификаторы для каждого слоя, если они уникальны? –

@GioBorje: У слоев уже есть идентификаторы ... –

О, я просто понял, что есть два контейнера. –

JQuery является JavaScript. Нет абсолютно никаких оснований для «преобразования» чего-либо.

И JQuery есть скрывать и показывать функции, построенные в.

$('#id').hide();

И как для события OnClick ..

Это должно быть в нижнем регистре.
Вы могли бы просто сделать $('.layer').hide();$('#specificLayer').show();.

источник

2011-05-22 01:20:24 Kayla

В скрипте на этой странице уже используется jquery, как показано на рисунке <script src="http://code.jquery.com/jquery-latest.js">, а также использование знака $ перед переменными после него. JQuery - это всего лишь набор функций javascript в библиотеке, поэтому вы можете объединить их без проблем.

источник

2011-05-22 01:21:20 Truk

'' 'может быть что угодно, это не значит, что используется jQuery. Только включение скрипта является сильным индикатором использования jQuery **, но ** он все равно может быть перезаписан другой структурой, например Prototype. –

Просто включение jquery не означает, что он используется. Использование $ afterward без jquery.noconflict делает. – Truk

Включение JavaScript-функции в jQuery

ответ

Смежные вопросы