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

发布于 2024-11-07 06:15:35 字数 684 浏览 0 评论 0原文

我使用 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 调用？

原文

I using Wordpress to display a list of thumbnails which will load a page when clicked using AJAX. I'm using a hidden div to store the page name of the particular thumbnail, like this:

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

And here is the AJAX code:

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

How would I go about getting the content of the hidden div when clicked so I can pass it to the AJAX call?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清秋悲枫 2024-11-14 06:15:35

您可以使用 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');

You can use this as a reference to the element clicked, then wrap it in a jQuery object and use .children('.image_path') to get the hidden div, and then .html() to get its content.

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

Or perhaps better would be to store the data as a custom attribute using HTML5 data- attribute.

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

Then use jQuery's .data() method to retrieve the data.

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

回复收藏 0 原文

反差帅 2024-11-14 06:15:35

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

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

这里查看 jquery 文档

There is a callback method as a parameter:

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

take a look at the jquery docs here

回复收藏 0 原文

我还不会笑 2024-11-14 06:15:35

您应该只使用链接并使用单击事件来拦截默认行为，然后执行 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
});

You should just use links and use the click event to intercept the default behavior and then perform your AJAX call.

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

And then…

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

回复收藏 0 原文

空气里的味道 2024-11-14 06:15:35

在 HTML 文档中，.html() 可用于获取任何元素的内容。如果选择器表达式匹配多个元素，则仅返回第一个匹配的 HTML 内容。考虑这段代码：

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

这是来自 jquery html() 文档

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

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code: