PHP foreach、CSS 和 jQuery 脚本..如何交互？答案

【问题标题】：PHP foreach, CSS and jQuery script.. How to interact?PHP foreach、CSS 和 jQuery 脚本..如何交互？
【发布时间】：2011-10-23 17:37:08
【问题描述】：

我正在尝试在 PHP 文件上使用 jQuery 显示/隐藏脚本，它是这样的：

<?php
foreach ($empresas as $empresa) {
echo "<style type='text/css'>
.$empresa[teaserid] { 
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
.showhide$empresa[teaserid] {
    display:none;
}
</style>";
echo '<script type="text/javascript">';
echo ' $(document).ready(function(){ ';
echo '         $(\".$empresa[teaserid]\").hide(); ';
echo '         $(\".showhide$empresa[teaserid]\").show(); ';
echo '  $(\".showhide$empresa[teaserid]\").click(function(){ ';
echo '  $(\".$empresa[teaserid]\").slideToggle(), 500; ';
echo '  }); ';
echo ' });';
echo '</script>';
echo "<a href='#' class='showhide$empresa[teaserid]'>$empresa[titulo]</a><br />
    <div class='$empresa[teaserid]'>
TEST</div>";
}
?>

所以，我需要的是一个 php 中的 foreach 来响应新的 CSS 值和一个新的 jQuery 脚本。因为每个 DIV 需要不同的 CSS 和 jQuery 来关联并能够显示和隐藏其内容。这种回声不起作用。 CSS 没问题，但 jQuery 没有 PHP $strings。我能做些什么？或者有更简单的方法来做到这一点？仅与任何当前 div 相关的 jQuery 函数？感谢任何在这方面帮助我的人..

【问题讨论】：

我不是程序员.. :( 如您所见...
没关系，我们都从某个地方开始了 ..tinsology.net/2009/06/client-side-vs-server-side-code 阅读此内容 ..然后灯泡会亮起
这个难题有两个单独的部分，这就是为什么它被称为“客户端-服务器”关系。两者并没有像你想象的那样互动。 PHP 生成 HTML。 HTML 被传递给浏览器。用户做某事，一些数据被传回一个 PHP 文件，然后决定为用户的下一页生成哪个 HTML。

标签： php jquery css html foreach

【解决方案1】：

值得一提：

您可以创建一个设置对象来保存您的变量。例如：

你的 php：

<?php
    $settings = array( 'settingA' => 'something',
                       'settingB' => 'something else',
                       'wat'      => 9001 );
?>

将你的 JS 保存在你的 js 文件中——scripts.js 等等。但是您可以将其添加到您的 html 文件中：

<script>
   var settings = <?php echo json_encode( $settings ) ?>;
</script>

那会输出什么？

var settings = {"settingA":"something","settingB":"something else","wat":9001};

因此，您可以将所需的服务器信息放在一个全局对象中（或将其作为应用程序对象或其他东西的属性）并可以访问它。

console.log( settings.settingA ); // returns "something"

进一步查看您的问题，不要忘记您不必留在 PHP 标记中。我并不是提倡在你的 CSS 中使用 PHP，但这应该可以帮助你掌握这个概念：

<style>
  <?php foreach ($empresas as $empresa): ?>
    .showhide<?php echo $empresa['teaserid'] ?> {
      display:none;
     }  
  <?php endforeach; ?>
</style>

【讨论】：

这些东西。所有这些事情。全部完成。

【解决方案2】：

在 PHP 中，只能将变量放在双引号字符串中：

$a = 'Jon';
echo "Hi $a"; // Should output 'Hi Jon'
echo 'Hi $a'; // should output 'Hi $a'

因此，如果您希望 Javascript 读取：

$(".Jon") // where Jon is the value of $a

然后在PHP中你可以这样输出：

echo '$(\".' . $a . '\")'; // Notice we are splitting the echo statement into a concatenation of 3 strings

【讨论】：

php 中的 var 语句如何对待你？

【解决方案3】：

实际上并不需要让 PHP 为每个项目打印一个新的 CSS 和 Javascript 块。如果你写的 css 和 javascript 是个好办法，那么一切都会为你处理。

要记住的另一件事是，PHP 是最基本的模板语言，因此，如果您发现自己在回显大量代码，则可能是有问题。取而代之的是这样的：

<?php
$variable = "SOme value";
echo "Some very long huge string with <html> tags and stuff plus $variables";
?>

你可以这样做，多次打开和关闭标签。

<?php $variable = "SOme value"; ?>
Some very long huge string with <html> tags and stuff plus <?php print $variables; ?>

在此基础上，这里是您的代码的修改版本。同样，不需要让 PHP 输出带有硬编码 id 的自定义 Javascript，您真正需要的是构建您的 javascript，以便它根本不需要知道任何这些东西，就像我所做的那样。

<style type='text/css'>
/* The CSS is the same, so just have one class that is used on all the items. */
.empresa-teaser { 
  width:100%;
  background-color: #CCC;
  color: #000;
  margin-top:10px;
  border:1px solid #CCC;
  position:relative;
  vertical-align:middle;
}
</style>

<script type="text/javascript">
  $(function(){
    // Hide all of the teasers to start.
    $(".empresa-teaser").hide();

    // Add a handler for when the show/hide link is clicked.
    $(".showhide-empresa-teaser").click(function(){

      // When it is clicked, find the next item with the 'empresa-teaser' class
      // and show it using a sliding toggle effect.
      $(this).nextAll('.empresa-teaser:first').slideToggle(500);
    });
  });
</script>


<?php foreach ($empresas as $empresa) { ?>

  <a href='#' class="showhide-empresa-teaser">
    <?php print $empresa['titulo']; ?>
  </a>
  <br />
  <div class="empresa-teaser">TEST</div>

<?php } ?>

【讨论】：

哇！这很漂亮！ :) 谢谢洛根！