如果链接中的 html 等于某些东西，我如何操作链接或链接的父级？答案

【问题标题】：how do i manipulate a link or a link's parent if the html in the link equals something?如果链接中的 html 等于某些东西，我如何操作链接或链接的父级？
【发布时间】：2013-12-17 20:10:34
【问题描述】：

编辑： 可能把问题搞砸了。意思是“如果链接中的 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 列表中执行这两个中的一个。没关系：

<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”上获得活动类。

【问题讨论】：

为什么不在代码中生成菜单并直接更改输出？
菜单本身是一个 php 文件，没有逻辑或变量功能。它包含在另一个具有所有 php 和 jquery 逻辑的 php 页面中。
你应该重构你的代码。事后在活动状态下进行黑客攻击是错误的做法。
@loarce：每个php文件都有逻辑能力！仅仅因为它包含在内并不意味着您不能在其中编写代码。目前听起来像静态标记。随着您的网站变得越来越大，菜单将动态生成，让您可以轻松地潜入活动课程中......

标签： php jquery css database variables

【解决方案1】：

您可以使用像这样的内联 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>

【讨论】：

相同的菜单在页面上被多次使用。唯一可行的方法是，如果可以在页面的适当位置将 $var1 更改为 $var2 或 $var3 或 $var4 或 $var5 或 $var6。

【解决方案2】：

不清楚为什么在服务器上生成 HTML 标记时您不会影响它，因为我假设您已经在服务器上获得了变量 - 可能来自客户端请求（页面导航？）。但是，要回答您的问题：

DOM元素的遍历和操作

您需要运行 Javascript 的客户端上可用的变量。然后，您可以遍历 lis 并将它们的值与变量进行比较。找到匹配项后，您可以对 DOM 元素进行调整（即jQuery addClass）。

对于循环，请参阅 jQuery each，并在 jQuery text 中查看元素的文本内容。

如何将变量导入Javascript：

如上所述，这需要 Javascript 来“了解”这些变量。没有什么魔法可以让它发挥作用。您必须从服务器获取它们，或者将其作为 Javascript 代码包含在最初从服务器请求的页面中（例如当您执行 http://www.example.com/index.html 时）或您的 Javascript 代码向服务器（请参阅jQuery ajax）并从响应中解析变量。

【讨论】：

【解决方案3】：

我以不同的方式做到了。

首先我为所有菜单项添加了唯一的类名。我使用了类而不是 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个变量，每个菜单有很多链接，所以上面要复制粘贴很多次才能覆盖所有的组合。以上只是第一组的两条规则，第二组的两条规则。规则远不止这些。

假设有这么多：

varset1a1 到 varset1a17

那么 varset1b 有 1 到 17，然后 varset1c 有 1 到 17，然后 varset1d 有 1 到 17，然后 varset1e 有 1 到 17。

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

程序很多，但每个菜单只有 6 行在 html 源代码中生成。

这是一个示例，如果使用了两个菜单中的所有 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>

如果我将所有字符都放在一个标记集和一个文档就绪子句之间，也许我可以减少字符数？我讨厌将 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>

【讨论】：