Question

我正在使用wordpress网站http://www.nicherecruitment.co.nz/hr/job-search/?ja-classifications=319121

基本上，我需要的是如果我点击'更多'或工作标题，他们会转到实际链接（例如http://www.nicherecruitment.co.nz/hr/job-search/?ja-job=1566592）

默认是当我点击阅读更多（或标题）时，作业详细信息将只展开，链接不会改变。这会阻止用户引用作业的实际链接。

我尝试使用jquery代码更改href属性，但奇怪的是它不起作用。它根本没有效果：

jQuery(document).ready(function($){
    $('.job a.view-details').each(function(){
        $(this).attr('href',"<?php echo get_permalink(); ?>?ja-    job="+$(this).attr('data-job-id'));
    });
    console.log("<?php echo get_permalink(); ?>");
    console.log($('.job a.view-details').attr('data-job-id'));

    $('.job a.view-details').addClass('testClass');
    $('.job .view-details').hide();

});

第一个控制台日志输出了输出http://www.nicherecruitment.co.nz/hr/job-search/所需的必要永久链接。第二种是输出名为data-job-id的attr，但输出'undefined'

addClass（）和hide（）只是测试我的代码是否影响目标。但它们都不会影响目标。

我也尝试了另一种解决方案：

<script type="text/javascript">
jQuery(function ($) {
    $( "body" ).on( "click", ".job a.view-details", function() {
    $(this).preventDefault();    
       var url = "<?php echo get_permalink(); ?>?ja-job=" + $(this).attr('data-job-id');
       window.location.replace(url);
  });
}); 

</script>

预期产量： After someone has clicked anywhere in the body, jquery looks at all the elements on the page again (so the dynamic content we added gets included in the DOM) it then see's if the click was on the view-details link. If it was, it prevents the link from working (preventDefault) and executes our code

但事实并非如此，它根本不做任何事情:(。

Job Adder JS Widget 代码为：

<div id="ja-jobs-widget"></div>
<script>// <![CDATA[
    var _jaJobsSettings = {                         
       key: "3hmt352pjc3exomgzmpysvycpm",                         
       applicationFormSettings: { 
            useExternalApplicationForm: true,                    
            showExternalApplicationFormInNewWindow: false                         
       },                                       
       jobSearchSettings: {             
            showSearchForm: true,           
            searchButtonText: "Search"              
       }             
    };
// ]]></script>
 <script src="//jobadder.com/widgets/v1/jobs.min.js"></script>

Answer 1

混合jQuery / PHP看起来像失败。

get_permalink()应该是.job a.view-details的数据属性，因为它不会“动态”运行。呈现HTML后，我们无法通过AJAX动态访问PHP函数。

Answer 2

我的同事解决了这个问题。

为了这里也是初学者的其他人的利益，这里是我想要分享的代码：

<script type="text/javascript">

   jQuery(function ($) {

            $( document ).on( "mouseenter", "#ja-jobs-widget", function(e) {

                $('.job a.view-details').each(function(){
                    $(this).attr('href',"<?php echo get_permalink(); ?>?ja-job="+$(this).attr('data-job-id'));
                    $(this).removeClass('view-details');
                });

             });
   });

</script>

＆＃34;我们使用＆＃39;＆＃39;＆＃39;函数，用于当内容已动态添加到DOM时，因此在页面加载时不存在的内容，但由JobAdder Javascript动态添加。

它只是循环遍历每个链接并更改href属性。

然后删除查看详情＆＃39;因此JobAdder不会覆盖我们的链接，所以下次鼠标进入div时，它不会循环通过这个＆＃34; -

JQuery没有在Job Adder JS Widget上工作

2 个答案: