Question

想法：

脚本和php放在一个php文件中，因此很容易插入到不同的页面中。

什么有效：

该脚本在首页上运行良好。

什么行不通：

该脚本不适用于任何其他页面。
当脚本不起作用时，不会出现错误。

我尝试了什么：

将脚本移动到页脚，标题，正文开头。没有任何效果。
删除脚本，并使用CSS执行效果（不起作用，对CSS来说很复杂）

脚本+ php：

<script>
$(function() {
  $('#lear_forside').hover(function() {
    $('#bestill_forside').css('background-color', 'white');
    $('#bestill_forside').css('color', 'black');
    $('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png');
    $('#bestill_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v_ny.png');
  }, function() {
    // on mouseout
    $('#bestill_forside').css('background-color', 'black');
    $('#bestill_forside').css('color', '#99cc66');
    $('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png');
    $('#bestill_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png');
  });
});
</script>

<div id="bestill_lear_forside" class="row">
    <a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">
        <div id="bestill_forside" class="col-sm-6 svart">
                <div class="pull-right vertical-center half-content-wrapper" style="width: 100%;margin-right: 80px">
                        <img class="pull-left" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png">
                        <span class="pull-right bestill_forside_venstre">Bestill foredrag!</span>
                </div>
            </div>
    </a>
        <a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" target="_self">
        <div id="lear_forside" class="col-sm-6 hvit">
            <div class="pull-left vertical-center half-content-wrapper" style="width: 100%;margin-left: 80px">
                        <img class="pull-right" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png">
                        <span class="bestill_forside_hoyre">Lær innbokskontroll!</span>
                </div>
         </div>
    </a>
</div>

我猜有些东西丢失了，或者有些东西会覆盖脚本。我该怎么办？我应该将脚本插入其他地方吗？

我在标题中包含以下内容：

<?php wp_enqueue_script("jquery"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

页面上有一个错误： -

$('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png');

已更改为

$('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png");

您使用了bloginfo的单引号，有四个地方，请尝试下面的脚本并重新运行代码。

<script>
$(function() {
  $('#lear_forside').hover(function() {
    $('#bestill_forside').css('background-color', 'white');
    $('#bestill_forside').css('color', 'black');
    $('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png");
    $('#bestill_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v_ny.png");
  }, function() {
    // on mouseout
    $('#bestill_forside').css('background-color', 'black');
    $('#bestill_forside').css('color', '#99cc66');
    $('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png");
    $('#bestill_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png");
  });
});
</script>

Answer 2

通过将所有ID替换为类来解决问题。

Jquery仅适用于某个特定页面。显示其他错误没有错误，但不起作用

2 个答案: