Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2011, 11:59
Интересующийся
Отправить личное сообщение для MaximusGrek Посмотреть профиль Найти все сообщения от MaximusGrek
 
Регистрация: 27.08.2011
Сообщений: 10

Помогите сократить код.
Возможно ли такое решение?

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".

Последний раз редактировалось MaximusGrek, 27.08.2011 в 12:15.
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2011, 12:01
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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();
            }
        }
    });
});



Сообщение от MaximusGrek Посмотреть сообщение
Возможно ли что бы оглядываясь на "class", или по "onmouseclic" - вызывался файл с тем же именем что и "class", или "onmouseclic".
неясно. понятней опишите

Последний раз редактировалось melky, 27.08.2011 в 12:17.
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2011, 14:08
Интересующийся
Отправить личное сообщение для MaximusGrek Посмотреть профиль Найти все сообщения от MaximusGrek
 
Регистрация: 27.08.2011
Сообщений: 10

Спасибо. Узнал нового.
Но смысл остался тот же.
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;
		
		});

Мне понравилось решение, с обработчиком всего списка. Но как заставить открыватся РАЗНЫЕ файлы.

Последний раз редактировалось MaximusGrek, 27.08.2011 в 14:15.
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2011, 14:13
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

$(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();
            }
        }
    });
});
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2011, 14:14
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

ну вместо этого:
$.ajax({
                    url: "htmls/p1.html",
                    cache: false,
                    success: function(html) {
                        $("#test").html(html);
                    }
                });

вообще можно сделать так:
$("#test").load('htmls/p1.html');
Хотя там параметр кеш есть, не знаю как повлияет
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2011, 14:26
Интересующийся
Отправить личное сообщение для MaximusGrek Посмотреть профиль Найти все сообщения от MaximusGrek
 
Регистрация: 27.08.2011
Сообщений: 10

Спасибо огромное, вот эту самую возможность я и не знал:

url: "htmls/"+e.target.className+".html",


Еще раз спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2011, 14:42
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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();
        }
    }
    });
});
Ответить с цитированием
  #8 (permalink)  
Старый 28.08.2011, 15:40
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Может я непонял задачу, но помоему с ней справляется функция из 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 плохая идея.

Последний раз редактировалось DjDiablo, 28.08.2011 в 16:08.
Ответить с цитированием
  #9 (permalink)  
Старый 28.08.2011, 16:53
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от MaximusGrek Посмотреть сообщение
<a href="#menu_1_2_1" class=*!*"p1"*/!*>Punkt1</a>
<a href="#menu_1_2_2" class=*!*"p2"*/!*>Punkt1</a>


$('.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 ссылок внутри списка подгружалась без кеша страница, которая равна классу этой ссылки
Ответить с цитированием
  #10 (permalink)  
Старый 28.08.2011, 17:04
Профессор
Отправить личное сообщение для ваый Посмотреть профиль Найти все сообщения от ваый
 
Регистрация: 29.06.2011
Сообщений: 445

Классы тут использовать нельзя. Они не для этого предназначены. Нужно использовать все по назначению. А если для того, чтобы сделать текущий пункт активным мы захотим сделать что-то такое:
<a href="#menu_1_2_1" class="p1 *!*active*/!*">Point1</a>
что часто и делается? И ссылка перестанет работать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающие списки. Помогите подправить код. cardsmoney Элементы интерфейса 6 18.02.2011 16:20
Помогите сократить код Diego Общие вопросы Javascript 4 14.02.2011 20:01
Код калькулятора на JS. помогите с ошибкой! kirill.psl Общие вопросы Javascript 9 26.08.2010 11:38
Не работает простой код. Помогите, очень надо AntiBuger Internet Explorer 1 27.05.2010 16:35
Помогите код оптимизировать. Suharik Events/DOM/Window 2 27.05.2010 11:59