Question

我在jQuery上尽我所能，但本周我喜欢（需要）完成一个网站，我可以在过去八小时内找到解决这个问题的方法。

设置

我正在使用ajaxed wp主题，我根据自己的喜好定制。

问题

当您单击主导航链接时，我编写了一个简单的函数来更改标题图像和标题文本。

该功能在header.php中有效，但在main_navp.php中包含的自定义首页（index.php）中无法使用。在navp.php上，当onclicked应该执行与导航栏上的单击相同的更改时，会出现一个图像。

的index.php



<?php get_header(); ?>

 <div id="main-content"><div id="inside">

 <?php get_template_part('main_navp'); ?>

 <?php if// HERE IS THE WP LOOP (not used so left out) //?>

<div class="pagination">
   <span class="older"><?php next_posts_link('&laquo; Older Entries') ?></span>
 <span class="newer"><?php previous_posts_link('Newer Entries &raquo;') ?></span>
 </div>``

<?php else : ?>

<h1>no posts...</h1>

<?php endif; ?>

</div></div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

该功能包含在.. <?php get_header(); ?> <div id="main-content"><div id="inside"> <?php get_template_part('main_navp'); ?> <?php if// HERE IS THE WP LOOP (not used so left out) //?> <div class="pagination"> <span class="older"><?php next_posts_link('« Older Entries') ?></span> <span class="newer"><?php previous_posts_link('Newer Entries »') ?></span> </div>`` <?php else : ?> <h1>no posts...</h1> <?php endif; ?> </div></div> <?php get_sidebar(); ?> <?php get_footer(); ?>

中的header.php中

head>

在<script type="text/javascript"> $(document).ready(function() { $("a[title='Gigs']").click(function() { $("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)"); $("a#nav_text").html("Gigs"); }); $("a[title='Bio']").click(function() { $("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)"); $("a#nav_text").html("Biography"); }); $("a[title='Gitaarles']").click(function() { $("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)"); $("a#nav_text").html("Gitaarles"); }); $("p[id='les_mp']").live("click", function() { $("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)"); $("a#nav_text").html("Gitaarles"); }); $("li[id='homew']").click(function() { $("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)"); $("a#nav_text").html("Home"); }); }); </script>（包含在main_navp.php index.php之后），此功能对此项目无效。但它应该由header.php触发，如上所示。

$("p[id='les_mp']").live("click", function()

主要的jquery在header.php

中被篡改

   <div id="boxred_b">

  <div class=head_box><a>Gitaarles</a></div>

      <p class="homeles" id="les_mp">
       <a href="/gitaarles"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" /></a>
      </p>

在footer.php中是jquery函数的所有其余部分。

<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>

我试图让事情尽可能短。如果您需要更多信息，请询问。

-update

使用标题中的live函数似乎无法解决问题。我正在使用XAMPP在本地运行网站。如果它有助于我可以进行在线wp安装或者可以提供webside（html / java）源。

Answer 1

因为您正在对您的页面进行Ajax处理，所以事件不会订阅您的新元素。尝试使用.live()命令。

另外，这可以吗？ $("p[id='les_mp']").click(, function() ...
不确定这个逗号。

Answer 2

我尝试过使用像这样的代码中的live函数。

$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");

});

中的

 $(document).ready(function() 
    { .... }

在header.php中

在main_nav.php中点击时仍然无法正常工作当我把代码从main_nav中放入header.php时它有效。

Answer 3

您可能希望使用以下链接中的方法将ajax内容重构为单独的文件。不确定它是否有助于解决原始问题，但我已经看到事情发生后http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global 基本上你将你的url变成一个正在打印的变量，你的脚本可以访问wp_localize_script

Jquery只能在header.php中使用

3 个答案:

Jquery只能在he​​ader.php中使用

3 个答案:

Jquery只能在header.php中使用