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

有一个回调方法作为参数：

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

查看jquery docs here

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

在HTML文档中，.html（）可用于获取任何元素的内容。如果选择器表达式与多个元素匹配，则只返回第一个匹配的HTML内容。请考虑以下代码：

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

这是来自jquery html（）docs

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

使用jquery / javascript选择被点击元素的内容

4 个答案: