javascript - 如何获取 "this"变量混合 php 和 jQuery？

Question

我有一组盒子:

HTML

<button class="btn-modal">
   <div>Ajax content 1</div>
</button>
<button class="btn-modal">
   <div>Ajax content 1</div>
</button>

在 PHP 循环中我这样做:

<?php 
$permalink = get_permalink(); // Link of the box
?>
<script>
var simple = '<?php echo $permalink; ?>';
</script>

上面的 php 循环为每个 simple 变量中的每个框链接打印正确的链接

然后我通过 ajax 调用内容，如下所示:

$(document).on( 'click', ".btn-modal", function(){
  var cont = $(this).simple +  " .content"; // Load via ajax the Box link + content 
  jQuery(".modal-body").load(cont);
});

变量simple已正确应用于所有框，但我没有得到点击时的此框链接，而是收到了“找不到错误”

http://www.example.com/xchanges/home/work/interactive/undefined 404 (Not Found)

Answer 1

我想我明白你想做什么。您的方法不是正确的方法，您想为每个 div 保存一个链接，然后在某些 JS 逻辑中使用该链接。

然后在你的循环中(这是Wordpress吧？)你需要在data-attr中设置你想要的DOM元素中的链接，并为该div提供一些类名，以便你实际上可以使用 JS 选择它

echo '<div class="someClass" data-src='. get_permalink() . '> ..... 

结果应该是:

<div class="someClass" data-src="http://..." >Ajax content 1</div>

现在，你的 JS

$(document).on( 'click', ".btn-modal", function(){
  var cont = $(this).children('.someClass').attr('data-src') + " .content";
  jQuery(".modal-body").load(cont);
});