Question

我可以使用一些帮助来隔离一个或两个元素并将它们放入javascript变量中。我还在学习如何正确识别DOM中的内容，我必须想象我想要做的事情是可能的。

请考虑以下事项：

$('.fancybox').fancybox({
    'autoScale': false,
    'type': 'iframe',
    'padding': 0,
    'closeClick': false,
    helpers: {
        overlay: {
            closeClick: false
        }
    },
    afterShow: function () {
        $("#overlay_content_top").show();
        $("#overlay_content_bottom").show();
    },
    afterClose: function () {
        $("#overlay_content_top").hide();
        $("#overlay_content_bottom").hide();
    }
});

<div class ="example">
<a class="fancybox" href="http://my-iframe.example"><img src="myimage.jpg" width="x" height="y" /></a>
**<span>Important Information I need</span>**
</div>

我需要将 .example span 中的html放入变量中，然后将其应用于fancybox中显示的内容。

疯狂的伪代码就像这样：

var getname = $(this).html('.example span');

$('.inherit_span').html(getname);

我在页面上有20个不同的项目可以点击，我不想为每个项目生成单独的id或名称，我宁愿只是在调用fancybox函数时从span中抓取html然后应用该名称指向灯箱显示中的另一个元素。任何帮助表示赞赏。

Answer 1

只需改变：

var getname = $(this).html('.example span');

为：

var getname = $('.example span').html();

或：

$('.inherit_span').html($('.example span').html());

Answer 2

其实你很亲密！首先，您必须选择获取span。您可以使用text()方法或html()方法获取文字或HTML！

var html = $('div.example > span').html()

然后你必须得到你想要放置文本的元素，并使用括号内的值/变量html()方法来设置它。

$('.inherit_span').html(html);

使用html() 值获取值，使用html() 值设置值！

text()方法几乎相同，但过滤掉任何HTML格式。

Answer 3

您可能会遇到多个<a>标记后面有多个<span>标记的情况，在这种情况下，使用.next()回调中的beforeShow方法，如< / p>

beforeShow: function(){
 var getname = $(this.element).next('span').html();
 $('.inherit_span').html(getname);
}

注意：为了使变量getname在回调之外可用，请在脚本开头声明它，如

<script>
var getname;
.
.

在使用fancybox时如何从此span元素创建javascript变量？

3 个答案: