Помогите сократить код.
Возможно ли такое решение?
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>что часто и делается? И ссылка перестанет работать. |
| Часовой пояс GMT +3, время: 02:40. |