如何操作链接或链接';s的父级,如果链接中的html等于某个值


how do i manipulate a link or a link's parent if the html in the link equals something?

编辑:可能把问题搞砸了。意思是"如果链接中的html等于php变量"

假设我们在数据库值所在的页面上有一个无序的列表菜单。我想将活动类添加到与数据库变量具有相同值的链接中。我该怎么做?我希望能够用文本值和数字值来实现这一点。

<ul>
  <li><a href="javascript:void(0)">text1</a></li>
  <li><a href="javascript:void(0)">text2</a></li>
  <li><a href="javascript:void(0)">text3</a></li>
</ul>
<ul>
  <li><a href="javascript:void(0)">500</a></li>
  <li><a href="javascript:void(0)">1000</a></li>
  <li><a href="javascript:void(0)">1500</a></li>
</ul>

假设这些变量在页面上:

$var1 & $var2

像这样回应:

<p><?php echo $var1; ?></p>
<p><?php echo $var2; ?></p>

会打印出这些值:

text1
1000

所以我想做的是一些php和jquery,它们可以做这些事情:

如果$var1等于text1,那么在第一个ul列表中执行这2个操作之一。无所谓:

<li class="active"><a href="javascript:void(0)">text1</a></li>
<li><a href="javascript:void(0)" class="active">text1</a></li>

如果$var1等于text2,那么第一个ul列表上的第二个列表项应该在"li"或"a"上获得活动类。

如果$var1等于text3,那么第一个ul列表上的第三个列表项应该在"li"或"a"上获得活动类。

如果$var2等于500,那么第二个ul列表上的第一个列表项应该在"li"或"a"上获得活动类。

如果$var2等于1000,那么第二个ul列表上的第二个列表项应该在"li"或"a"上获得活动类。

如果$var2等于1500,那么第二个ul列表上的第三个列表项应该在"li"或"a"上获得活动类。

您可以使用类似的内联if语句来完成此操作

<ul>
  <li><a href="javascript:void(0)" style="<?php echo $var1 == "text1" ? "active":"" ?>">text1</a></li>
  <li><a href="javascript:void(0)" style="<?php echo $var1 == "text2" ? "active":"" ?>">text2</a></li>
  <li><a href="javascript:void(0)" style="<?php echo $var1 == "text3" ? "active":"" ?>">text3</a></li>
</ul>
<ul>
  <li><a href="javascript:void(0)" style="<?php echo $var2 == "500" ? "active":"" ?>">500</a></li>
  <li><a href="javascript:void(0)" style="<?php echo $var2 == "1000" ? "active":"" ?>">1000</a></li>
  <li><a href="javascript:void(0)" style="<?php echo $var2 == "1500" ? "active":"" ?>">1500</a></li>
</ul>

不清楚为什么在服务器上生成HTML标记时不会影响它,因为我认为服务器上已经有了变量——可能来自客户端请求(页面导航?)。然而,要回答您的问题:

DOM元素的遍历和操作

您将需要运行Javascript的客户端上可用的变量。然后,您可以循环遍历li,并将它们的值与变量进行比较。一旦找到匹配项,就可以对DOM元素(即jQuery-addClass)进行调整。

有关循环,请参阅jQuery each和jQuery text以获取元素的文本内容。

如何将变量输入Javascript:

如上所述,这需要Javascript"知道"这些变量。没有魔法可以让它发挥作用。您必须从服务器获取它们,或者它作为Javascript代码包含在最初从服务器请求的页面中(就像您这样做时http://www.example.com/index.html)您的Javascript代码向服务器发出XMLHttpRequest(请参阅jQuery-ajax),并解析响应中的变量。

我用了不同的方式。

首先,我把唯一的类名放在所有菜单项上。我使用类而不是id,因为它在页面上多次使用每个菜单。

然后我用这个代码生成了活动css。。。

<?php if($varset1a == "500") { ?>
<script type='text/javascript'>$(document).ready(function() { $("#idname1a ul.classname li.classname1").addClass("active"); });</script>
<?php } ?>
<?php if($varset1a == "1000") { ?>
<script type='text/javascript'>$(document).ready(function() { $("#idname1b ul.classname li.classname2").addClass("active"); });</script>
<?php } ?>
<?php if($varset2a == "name1") { ?>
<script type='text/javascript'>$(document).ready(function() { $("#anotheridname1 ul.classname li.anotherclassname1").addClass("active"); });</script>
<?php } ?>
<?php if($varset2a == "name2") { ?>
<script type='text/javascript'>$(document).ready(function() { $("#anotheridname2 ul.classname li.anotherclassname2").addClass("active"); });</script>
<?php } ?>

菜单有2组,每组有6个变量,每个菜单有很多链接,所以上面的内容必须多次复制粘贴才能覆盖所有组合。以上只是第一组的2条规则,第二组的2个规则。规则远不止这些。

假设它有这么多:

varset1a1至varset1a17

然后varset1b有1到17,然后varset1c有1到16,然后varset 1d有1到18,然后varSet 1e有1到19。

然后将所有这些加倍,并将varset1更改为varset2,这就是有多少不同的规则。实际上更多是因为菜单2比菜单1有更多的链接。

编程工作量很大,但html源代码中每个菜单只有6行代码。

这是一个例子,如果使用了两个菜单中的全部6个。如果使用更少的菜单,则会更少。使用的菜单数量各不相同,但这是全部数量:

<script type='text/javascript'>$(document).ready(function() { $("#id1a ul.class li.class1a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id2a ul.class li.class2a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id3a ul.class li.class3a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id4a ul.class li.class4a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id5a ul.class li.class5a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id6a ul.class li.class6a").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id1b ul.class li.class1b").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id2b ul.class li.class2b").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id3b ul.class li.class3b").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id4b ul.class li.class4b").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id5b ul.class li.class5b").addClass("active"); });</script>
<script type='text/javascript'>$(document).ready(function() { $("#id6b ul.class li.class7b").addClass("active"); });</script>

如果我让它都在一个<script>标记集和一个文档就绪子句?我讨厌把php放在jquery之间,因为很多时候dreamweaver会产生语法错误。

编辑:

好的,现在完整的html输出是这样的,它仍然有效:

<script type='text/javascript'>
$(document).ready(function() {
  $("#id1a ul.class li.class1a").addClass("active");
  $("#id2a ul.class li.class2a").addClass("active");
  $("#id3a ul.class li.class3a").addClass("active");
  $("#id4a ul.class li.class4a").addClass("active");
  $("#id5a ul.class li.class5a").addClass("active");
  $("#id6a ul.class li.class6a").addClass("active");
  $("#id1b ul.class li.class1b").addClass("active");
  $("#id2b ul.class li.class2b").addClass("active");
  $("#id3b ul.class li.class3b").addClass("active");
  $("#id4b ul.class li.class4b").addClass("active");
  $("#id5b ul.class li.class5b").addClass("active");
  $("#id6b ul.class li.class7b").addClass("active");
});
</script>

我做这件事的方式是制定这样的规则:

<script type='text/javascript'>
$(document).ready(function() { 
<?php if($varset1a == "500") { ?>$("#id1a ul.class li.class1a").addClass("active");<?php } ?>
<?php if($varset1a == "1000") { ?>$("#id2b ul.class li.class2a").addClass("active");<?php } ?>
<?php if($varset2a == "name1") { ?>$("#id2a ul.class li.class1b").addClass("active");<?php } ?>
<?php if($varset2a == "name2") { ?>$("#id2b ul.class li.class2b").addClass("active");<?php } ?>
});
</script>