Выбор содержимого выбранного элемента с помощью jquery / javascript

Question

Я использую Wordpress для отображения списка миниатюр, которые будут загружать страницу при нажатии с использованием AJAX.Я использую скрытый div для хранения имени страницы конкретного эскиза, например:

<div class="load_image">
  <div class="image_path" style="display:none">portfolio-1</div>
  <img src="..here is the thumbnail source" />
</div>

А вот код AJAX:

var ajax_load = "<img src='img/load.gif' alt='loading...' />";
    var loadUrl = "ajax/load.php";
    $(".load_image").click(function(){
            //Get the hidden-div-content from class image_path.....somehow
        $("#ajax_result").html(ajax_load).load("<?php bloginfo('url') ?>/image_path");
    });

Как мне поступитьполучать содержимое скрытого элемента div при нажатии, чтобы я мог передать его вызову AJAX?

Answer 1

Вы можете использовать this как ссылку на элемент, на который щелкнули, затем обернуть его в объект jQuery и использовать .children('.image_path'), чтобы получить скрытый div, а затем .html(), чтобы получить его содержимое.

$(".load_image").click(function(){
    var hidden_content = $(this).children('.image_path').html();
    $("#ajax_result").html(ajax_load).load("<?php bloginfo('url') ?>/image_path");
});

Или, возможно, лучше хранить данные как пользовательский атрибут, используя атрибут HTML5 data-.

<div class="load_image" data-hidden="portfolio-1">
  <img src="..here is the thumbnail source" />
</div>

Затем используйте метод jQuery .data() для извлечения данных.

var hidden_content = $(this).data('hidden');

Answer 2

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

$('div.demo-container').html();

это из jquery html () docs

http://api.jquery.com/html/

Answer 3

Вы должны просто использовать ссылки и использовать событие click, чтобы перехватить поведение по умолчанию, а затем выполнить свой вызов AJAX.

<a href="/full-image.jpg" class="remote"><img src="/thumb-image.jpg"></a>

А затем ...

$('a.remote').click(function(){
  $('#result').load($(this).find('img').attr('src').replace('thumb', 'full'));
  return false; // prevent the browser from following the link
});

Answer 4

В качестве параметра есть метод обратного вызова:

$("#ajax_result").html(ajax_load).load("/image_path", function(val){
     //val contains what is returned
     $('jquery_selector').html(val);
});

посмотрите на документы jquery здесь