Выборка элиментов "a"

CrashX

В прошлом XSiteCMS
Регистрация
6 Июн 2008
Сообщения
681
Реакции
114
PHP:
$(document).ready(function(){  
  $("a[rel!='#overlay']").click(function() {
    var src = $(this).attr("href");  //Получаем href ссылки, по которой кликнули
    alert(src);
    $('#contents').load(src);  //В слой #content аяксом загружаем урл в href ссылки.
    //$('#contents').load($(this).attr('href'));
    return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
  });
});
ссылку получаю без проблем, алертом отрабатывает на ура, но ничего не происходит если убираю [rel!='#overlay'] все работает, но при этома не работают модаьлные окна тк они назначаются на a[rel^='#overlay']
 
Не совсем понятно из этого кусочка кода, что куда назначается. По коду видно, что первой строчкой выбираются все "a" у которых атрибут "rel" не равен "#overlay". Возможно при выводе имеет смысл сменить атрибут на основании которого делается выборка?
ниже написано что модальные окна назначаются на "a" у которых атрибут "rel" начинается с "#overlay". Может немного по другому реализовать выборку?
 
полный код
Код:
/**
 * Настройка jQuery
 * сжатие http://dean.edwards.name/packer/
 */
$(document).ready(function(){
  jQuery.ajaxSettings.cache=true;
  // Добавление контейнера анимации
  $('body').append('<div id="loading" style="display:none;"><img src="/images/common/loader.gif" /></div>');
  // Добавление контейнера окон
  $('body').append('<div class="overlay" id="overlay"><div class="modalbox" id="modalbox"></div></div>');
  // Анимация загрузки на все события связаные с активностью ajax
  $("#loading").bind("ajaxSend", function() {
    $(this).fadeIn(750);//show();
  }).bind("ajaxStop", function() {
    $(this).hide();
  }).bind("ajaxError", function() {
    $(this).hide();
  });
});

/**
 * Загрузка данных хранящихся в ссылке
 * в основной div
 */
$(document).ready(function(){
  $("a[rel!='#overlay']").click(function() {
    $('#contents').load($(this).attr('href')); //В слой #content аяксом загружаем урл в href ссылки.
    return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
  });
});

/**
 * Создание модального окна
 * загрузка данных хранящихся в ссылке с rel='#overlay'
 */
$(document).ready(function(){
  $("a[rel='#overlay']").overlay({
    mask: {
      color: '#fff',
      loadSpeed: 250,
      opacity: 0.75
    },
    left: 'center',
    top: '25%',
    oneInstance: true,
    closeOnClick: false,
    onBeforeLoad: function() {
      var wrap = this.getOverlay().find("#modalbox");
      wrap.load(this.getTrigger().attr("href"));
    },
    onBeforeClose: function() {
      $("#modalbox").html('');
    }
  });
});
/**
 * Печать страницы
 *  с rel='#print'
 */
function xprint() {
  $(document).ready(function() {
    $("a[rel='#print']").click(function() {
      var open, index;
      $("a[rel='#overlay']").each(function(i) {
        if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
          open=true;
          index=i;
        }
      });
      if(open) {
        $("a[rel='#print']").jprint();
      } else {
        window.focus();
        window.print();
      };
    });
  });
}
/**
 * Обработка форм с id x-form
 * отправка данных
 */
function xform() {
  $(document).ready(function(){
    var options = {
      //target: "#modalbox",
      //url: "{action}",
      //  beforeSubmit: Loading, //Request, // функция, вызываемая перед передачей
      success: Response, // функция, вызываемая при получении ответа
      type: "post", // get или post
      dataType: "html", // text, hmtl, xml, script или json
      //clearForm: true,
      //resetForm: true,
      timeout: 10000 // ожидание ответа в милисекундах
    };
    $("form[id^='x-form']").submit(function () {
      $(this).ajaxSubmit(options);
      return false;
    });
  });
}
//*/
/**
 * Отладочная функция,
 * отображение того что будет передаватся
 */
function Request(formData, jqForm, options) {
  var queryString = $.param(formData);
  alert(queryString);
  return true;
}

/**
 * Обработка получаемого ответа
 * переменная должна соотвествовать возвращаемому типу, данных (html, xml, json)
 * @param response
 */
function Response(responseText) {
  var open,index;
  $("a[rel='#overlay']").each(function(i) {
    if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
      open=true;
      index=i;
    }
  });
  if(open) {
    $("#modalbox").html(responseText);
    if ( responseText.length < 1 ) {
      $("a[rel='#overlay']").eq(index).data('overlay').close();
    }
  } else {
    $("#contents").html(responseText);
  };
}

я все поправил, в 1 месте заменял событие)
суть такая
у меня есть плагин jQuery.tools.overlay
это модальное окно в нем я делаю разные вещи, оно вызывается так же ссылками, только с рел=оверлей, и мне нужно было если не оверлей то загружать в тело страницы


есть только вопрос по оптимизации кода

Код:
 $("a[rel='#overlay']").each(function(i) {
    if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
      open=true;
      index=i;
    }
  });
можно ли уменьшить количество обращений к поиску элементов $("a[rel='#overlay']")
например заменив this будет ли это правильно ?
 
Перечитал еще раз про желание уменьшить количество обращений к поиску, может просто задать переменную в которой сразу будут храниться выборки, и работать уже с этими переменными?
"this" в JS можеть быть использована как элемент DOM или как Object JQuery, почитать имеет смысл тут:

в данном контексте смысла заменять по моему нет.
 
если я правильно выкурил ман то
скажем эта фукнция должна приобрести примерно такой вид

Код:
/**
 * Обработка получаемого ответа
 * переменная должна соотвествовать возвращаемому типу, данных (html, xml, json)
 * @param response
 */
function Response(responseText) {
  var open,index;
  var overlay=$("a[rel='#overlay']");
  overlay.each(function(i) {
    //if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
    if(overlay.eq(i).data('overlay').isOpened()) {
      open=true;
      index=i;
    }
  });
  if(open) {
    $("#modalbox").html(responseText);
    if ( responseText.length < 1 ) {
      //$("a[rel='#overlay']").eq(index).data('overlay').close();
      overlay.eq(index).data('overlay').close();
    }
  } else {
    $("#contents").html(responseText);
  };
}
 
Назад
Сверху