Помогите сократить код.
Возможно ли такое решение?
1. Есть меню HTML
<ul>
<li>
<a href="#menu_1_2_1" class="p1">Punkt1</a>
</li>
<li>
<a href="#menu_1_2_2" class="p2">Punkt1</a>
</li>
...........
</ul>
Общее кол-во ссылок в меню около 150 шт. По пунктам подключаются внешние файлы:
$('.p1').click(function(){
function show_test()
{
$.ajax({
url: "htmls/p1.html", // ссылка на подключаемый документ
cache: false,
success: function(html){
$("#test").html(html); // задаем идентификатор, #id, который должен быть присвоен нужному div блоку
}
});
}
$(document).ready(function(){ // когда страничка полностью загрузится
show_test(); // вызываем фнашу функцию с подключением документа
}); return false;
});
Соответственно что бы вызывать 150 файлов, нужны такие строки для каждого в отдельности. Возможно ли что бы оглядываясь на "class", или по "onmouseclic" - вызывался файл с тем же именем что и "class", или "onmouseclic". |
Oтформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] немного странный код... дело в том, что
$('.p1').click(function () {
необходимо писать, когда страничка уже загрузится. если скрипт находится в head, то необходимо писать так
$(function(){
$('.p1').click(function () {
...........
})
это сокращение от $(document).ready т.к. в моменту назначения обработчиков страница уже загружена,то можно написать так.
$(function() {
$('.p1').click(function() {
$.ajax({
url: "htmls/p1.html",
// ссылка на подключаемый документ
cache: false,
success: function(html) {
$("#test").html(html); // задаем идентификатор, #id, который должен быть присвоен нужному div блоку
}
});
return false;
});
});
если же код вставляется внизу страницы (где-то у конца тега body), то код можно еще сократить до такого.
$('.p1').click(function() {
$.ajax({
url: "htmls/p1.html",
// ссылка на подключаемый документ
cache: false,
success: function(html) {
$("#test").html(html); // задаем идентификатор, #id, который должен быть присвоен нужному div блоку
}
});
return false;
});
так как ссылок у вас много (150), то назначать обработчик каждой - насилие. легче назначить обработчик всему списку (ul), который будет ловить всплывающие от ссылок события клика. сделать это можно так
$('ul').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$.ajax({
url: "htmls/p1.html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
e.preventDefault();
}
}
});
если код (скрипт) подключается в head (сверху страницы), то надо обернуть его в обработчик загрузки страницы. в итоге код будет такой :
$(function() {
$('ul').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$.ajax({
url: "htmls/p1.html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
e.preventDefault();
}
}
});
});
Цитата:
|
Спасибо. Узнал нового.
Но смысл остался тот же. 150 ссылок = 150 файлов. Нужно коротенький код делающий: <a href="#" class="здесь имя файла"></a> = открывается файл, из указанной папки, с именем указанным в "здесь имя файла". И код этот должен обрабатывать ВСЕ ссылки одновременно. Ну, это для понятности:
$(здесь как бы ссылка с ВАРИРУЮЩИМСЯ классом в котором указанно имя файла).click(function(){
function show_test()
{
$.ajax({
url: "а здесь собственно папка,путь, по которому лежат файлы, + должен открыватся тот имя которого указанно в класс.",
cache: false,
success: function(html){
$("#test").html(html);}
});
}
$(document).ready(function(){
show_test();
}); return false;
});
Мне понравилось решение, с обработчиком всего списка. Но как заставить открыватся РАЗНЫЕ файлы. |
$(function() {
$('ul').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$.ajax({
*!*
url: "htmls/"+e.target.className+".html",
*/!*
cache: false,
success: function(html) {
$("#test").html(html);
}
});
e.preventDefault();
}
}
});
});
|
ну вместо этого:
$.ajax({
url: "htmls/p1.html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
вообще можно сделать так:
$("#test").load('htmls/p1.html');
Хотя там параметр кеш есть, не знаю как повлияет |
Спасибо огромное, вот эту самую возможность я и не знал:
url: "htmls/"+e.target.className+".html", Еще раз спасибо! |
devote, точно. кэш можно по-другому отменить
в итоге получается такая функция
$(function() {
$('ul').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$("#test").load("htmls/" + e.target.className + ".html?rand" + Date.now() );
e.preventDefault();
}
}
});
});
или так, если уж вообще приспичило. это самый минимум
$(function() {
$('ul').click(function(e) {
e.bubbles &&
e.target.tagName.toLowerCase() === "a" &&
$("#test").load("htmls/" + e.target.className + ".html?rand" + Date.now(),
e.preventDefault();
}
}
});
});
|
Может я непонял задачу, но помоему с ней справляется функция из 2х строчек. Суть которой загрузить в .target данные с адреса находящегося, в аттрибуте href ссылки класса supertarget; При таком подходе ссылок может быть как угодно много, главное чтобы url был в href ссылки. Вместо href можно использовать любой другой атрибут к примеру <a tazik="www.yandex.ru"> тоже приемлимо, извлекается соответственно при помощи $(this).attr("tazik").
<a href="superInfa.html" class="superlink">нажми на супер ссылку</a>
$('.superlink').click(function(){
$(".target").load($(this).attr("href"));
return false;
});
Код непроверял. Да кстатии, вот это вот href="#" необязательно, достаточно обработчику click вернуть FALSE. Тоесть используйте href по назначению, а имя файла в class плохая идея. |
Цитата:
|
Классы тут использовать нельзя. Они не для этого предназначены. Нужно использовать все по назначению. А если для того, чтобы сделать текущий пункт активным мы захотим сделать что-то такое:
<a href="#menu_1_2_1" class="p1 *!*active*/!*">Point1</a>что часто и делается? И ссылка перестанет работать. |
Цитата:
Цитата:
|
всё равно class по идеи это идентификатор группы обьектов а не уникального обьекта,мы тут немного отходим от философии но бог с ним.
И к тому же придётся обьявлять разработчик для каждого класса (p1,p2, hrenovina3и т.д.), а это вообще криво. помоему разумнее использовать href для ссылки, а класс чтобы повесить обработчик. И вот ещё, возможно более разумно использовать вместо $('.class').click(function(){ использовать $('.class').live. Это избавит нас от необходимости использовать $(document).ready внутри обработчика. |
Цитата:
в данном случае нестандартное использование класс начисто отрезает возможность, менять оформление ссылок. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
P.S. Те кто реально хочет людям помогать, помогают, и даже на этом зарабатывают деньги. Возьми пример с Ильи, хозяина этого портала. |
Цитата:
|
Спасибо Вам господа, все это очень интересно. И познавательно конечно. Однако я не программер и на Джаве пишу за еду :).
Проще говоря у меня иногда получается, а мой програмизм не дает умереть с голоду. Но я учусь! Спасибо всем за помощь! Однако теперь возникла проблема следующего характера: Мне пришлось кое что поменять немного-
<ul>
<li class="class1">
<ul>
<li>
<a href="#menu1_1" class="gromozeka_1">Громозека 1</a>
</li>
<li>
<a href="#menu1_2" class="gromozeka_2">Громозека 2</a>
</li>
</ul>
</li>
<li class="class2">
<ul>
<li>
<a href="#menu2_1" class="chupakabra_1">Чупакабра 1</a>
</li>
<li>
<a href="#menu2_2" class="chupakabra_2">Чупакабра 2</a>
</li>
</ul>
</li>
</ul>
В реальности ссылок больше как и классов.
$(function() {
$('.class1').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$.ajax({
url: "htmls/class1/"+e.target.className+".html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
e.preventDefault();
}
}
});
});
$(function() {
$('.class2').click(function(e) {
if (e.bubbles) {
if (e.target.tagName.toLowerCase() === "a") {
$.ajax({
url: "htmls/class2/"+e.target.className+".html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
e.preventDefault();
}
}
});
});
Так вот это в 8 експлорере и опере 9 - НЕ РАБОТАЕТ! |
И еще я не понял: if (e.bubbles) {
Что такое bubbles? |
$(function() {
$('.class1').click(function(e) {
e = e || window.event;
if ( e.target.tagName.toLowerCase() === "a" ) {
$.ajax({
url: "htmls/class1/"+e.target.className+".html",
cache: false,
success: function(html) {
$("#test").html(html);
}
});
if ( e.preventDefault ) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
});
});
|
Цитата:
jq event не любите вы её использовать :) |
Цитата:
|
Да Бог с ним - главное что бы работало. А оно работает и работает быстро!
Спасибо Мастер melky и двойное спасибо Мастер devote. P.S. Про bubbles был глупый вопрос... Изините. |
| Часовой пояс GMT +3, время: 05:16. |