JQuery Wrap不起作用，因为它被CSS阻止

我正在使用一个带有滑块插件的wordpress网站。轨道滑块。该网站是

我试图弄清楚如何使用jquery代码在每个滑块图像上放置链接。下面的代码正在成功运行。但是，有一个包装器不允许单击滑块。简而言之，即使我对图像使用z索引和相对位置，也无法单击锚定标记

jQuery代码：

 jQuery(document).ready(function(){
    jQuery('.slide-slide.slide-content-1702').wrap("<a class='slider-image' href='<?php echo home_url(); ?>/courses/freight-warehousing/'></a>");
    jQuery('.slide-slide.slide-content-1700').wrap("<a class='slider-image' href='<?php echo home_url(); ?>/courses/hairdressing/'></a>");
 });

jQuery（文档）.ready（函数（）{
jQuery（'.slide.slide-content-1702'）。换行（“”）；
jQuery（'.slide.slide-content-1700'）。换行（“”）；
});

---

Q：如何使链接被滑块包装器解除阻止？

要执行您的后续操作，我认为您只需要从jQuery（）中删除

。当查看您的url时，我看不到该元素

为了实现这一点，我们可以假设，由于链接是通过jQuery发布的，所以它们不需要索引（SEO）。所以您可以尝试将单击绑定到.slide-content-x、.slide-slide或父元素并更改窗口位置

使用：
http://avonmore.ac.nz/

$( '#orbit-inside' ).on( 'click', '.slide-content', function() {
    var url = 'http://avonmore.ac.nz/';

    if ( $( this ).hasClass( '.slide-content-1700' ) ) {
        url += '/courses/hairdressing/';
    }

    if ( $( this ).hasClass( '.slide-content-1702' ) ) {
        url += '/courses/freight-warehousing/';
    }

    if ( url != 'http://avonmore.ac.nz/' ) {
        // Make sure something was set
        window.location.href = url;
    }
});

要完成您想要的任务，我想您只需要从jQuery（）中删除
。slide slide
，因为在查看url时，我没有看到该元素

为了实现这一点，我们可以假设，由于链接是通过jQuery发布的，所以它们不需要索引（SEO）。所以您可以尝试将单击绑定到.slide-content-x、.slide-slide或父元素并更改窗口位置

使用：
http://avonmore.ac.nz/

$( '#orbit-inside' ).on( 'click', '.slide-content', function() {
    var url = 'http://avonmore.ac.nz/';

    if ( $( this ).hasClass( '.slide-content-1700' ) ) {
        url += '/courses/hairdressing/';
    }

    if ( $( this ).hasClass( '.slide-content-1702' ) ) {
        url += '/courses/freight-warehousing/';
    }

    if ( url != 'http://avonmore.ac.nz/' ) {
        // Make sure something was set
        window.location.href = url;
    }
});

导致z索引设置出现问题的div是“#内部轨道”。此div上的z-index设置必须为0或更高，链接才能工作。此外，为了使整个滑块可单击，您需要包装“.slide slide”和“slide content”元素

例如：

jQuery(document).ready(function(){
    jQuery('.slide-slide.slide-content-1702').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/freight-warehousing/'></a>");
    jQuery('.slide-slide.slide-content-1700').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/hairdressing/'></a>");
});

现在唯一的问题是，应用于div#包装器的代码重叠了。您可以通过为背景图像制作一个单独的div来解决这个问题，然后使用z索引和position:absolute的组合；要正确定位它

希望这有帮助。
导致z索引设置出现问题的div是“#内部轨道”。此div上的z-index设置必须为0或更高，链接才能工作。此外，为了使整个滑块可单击，您需要包装“.slide slide”和“slide content”元素

例如：

jQuery(document).ready(function(){
    jQuery('.slide-slide.slide-content-1702').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/freight-warehousing/'></a>");
    jQuery('.slide-slide.slide-content-1700').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/hairdressing/'></a>");
});

现在唯一的问题是，应用于div#包装器的代码重叠了。您可以通过为背景图像制作一个单独的div来解决这个问题，然后使用z索引和position:absolute的组合；要正确定位它

希望这有帮助。
尝试删除类元素之间的空间
。幻灯片。幻灯片-content-1702
尝试删除类元素之间的空间
。幻灯片。幻灯片-content-1702
非常感谢。这对我帮助很大。没问题，很高兴它帮了我的忙：）非常感谢。这对我帮助很大。没问题，很高兴它帮了我：）