Как найти href и перейти на .load?

Question

У меня есть некоторый код, который выполняет ajax-загрузку при нажатии на ссылку в элементе div.

Теперь я хочу сделать весь div активируемым, но не уверен, как заставить это работать с .load.Я думаю, что знаю, что происходит не так, но я не знаю, как это исправить, поскольку я новичок в jQuery - надеюсь, что кто-то может помочь. * Вот HTML

<div class="work">
    <img class="introPic" src="images/thumb.jpg" width="250" height="99" />
    <h3>
        <img class="arrow" src="images/arrow_open.gif" alt="&gt;" />
        <a class="titlelink" href="project2.html">Project 2</a>
    </h3>
    <div class="projectIntro">
        <p>This is some intro text for project 2</p>
    </div>
    <div class="pictures"></div>
</div>

Вот полный блок кода в его нынешнем виде:

$('div.work').on('click',function() {
    window.location = $(this).find("a").attr("href"); 
    return false;

    var parent = $(this).parents(".work");
    var content_holder = parent.children(".pictures");

    if (parent.hasClass("selected_work")) {
        close_other();
        return;
    }

    close_other();

    parent.addClass("selected_work");

    content_holder.load(this + " #ajaxContent", function() {

    });

    $('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
});

function close_other() {
    var selected_work = $('.selected_work');

    selected_work.children('.pictures').empty();    
    $('.selected_work img.arrow').attr("src", "images/arrow_open.gif");
    selected_work.removeClass("selected_work")
}

$('div.work').click(function() {
    $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});      
});  

Первая проблема заключается в том, что при нажатии div он находит href якоря внутри, но загружает его в новом окне.в отличие от текущего окна по желанию.Я предполагаю, что это из-за window.location - он находит ссылку и переходит туда, тогда как я хочу, чтобы она нашла ссылку и передала ее загрузке AJAX.

Вторая проблема заключается в том, что переменные теперь неверны,Хотя код был верным, когда щелкнул якорь внутри .work (и селектор был $(.work a) - .work, следовательно, был родитель якоря, но это уже не так:

Мне не нужнородитель, который больше не родитель, (.work) - это то, на что я сейчас нажимаю, поэтому я думаю, что это просто $(this) - поэтому логически я хочу что-то вроде:

    var content_holder = $(this).children(".pictures");

    if $(this).hasClass("selected_work")) {
        close_other();
        return;
    }

, но с синтаксисомошибка, так что это не может быть правильно ...

Тогда

parent.addClass("selected_work");

, вероятно, должно измениться на что-то вроде

$(this).addClass("selected_work");

Я был бы очень признателен за помощь в получениипрохождение href и синтаксиса прямо для этого, так как я пытаюсь заставить его работать в течение 2 дней. Рабочим примером может быть глазурь на торте. Большое спасибо!

Answer 1

Если я понял, что вы ищете - при нажатии на родительский элемент div элемент .pictures должен заполняться содержимым, загруженным через AJAX с URL-адреса в .titlelink?

Если это так, попробуйте это:

$("DIV.work").on("click", function() {
    // empty any open projects
    $(".selected_work .pictures").empty();

    var $parent = $(this);
    $parent.addClass("selected_work");

    var loadUrl = $(".titlelink", $parent).attr("href");
    var contentHolder = $(".pictures", $parent);
    contentHolder.load(loadUrl + " #ajaxContent", function() {
        $(this).find('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
            animSpeed:300,
            pauseTime:4000,
            controlNav:true,
            pauseOnHover:true //Stop animation while hovering
        });

        $('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
     });
});

// this stops the default link behaviour from opening the new window
$("DIV.work A").on("click", function(e) {
    e.preventDefault();
});

Answer 2

Потому что return false; остальная часть вашего кода не выполняется.Вы можете изменить хеш с помощью location.hash:

var lastPart = $(this).find('a').attr('href').split('/');
var hash = lastPart[lastPart.length - 1];

• Получить href атрибут
• Разделить его с помощью /
• Взять последнюю часть

Вам не нужно использовать .parents(), потому что $(this) относится к .work, поэтому окончательный код будет:

$('div.work a').click(function(e) { e.preventDefault(); });
$('div.work').bind('click', function() {
    var href = $(this).find('a').attr('href'),
        lastPart = href.split('/'),
        hash = lastPart[lastPart.length - 1];

    var $this = $(this);
    var content_holder = $this.children(".pictures");

    close_others($this);
    if ($this.hasClass("selected_work")) {
      return;
    }
    else {
      window.location.hash = hash;
      $this.addClass("selected_work");
    }

    content_holder.load(href + ' #ajaxContent');

    $this.find('img.arrow').attr("src", "images/arrow_close.gif");
});
function close_others($current) {
  $('.selected_work').not($current).removeClass("selected_work")
    .find('.pictures').empty().end()
    .find('img.arrow').prop("src", "images/arrow_open.gif");
}