我如何在jQuery中引用php变量？

Question

我是jQuery的初学者，我在这里有一些脚本，我想把jQuery与PHP混合。 我有课程，那些课程是课程。 教师被指派教授课程。 我想要的是一个链接，如果我按它弹出一个弹出窗口，其中显示课程详细信息或课程详细信息。 我的问题是我将在一个页面中有多个链接，因此对话框/模态窗口，以便$ l ['id']和$ c ['id']将是不同的。 因此，如果jQuery脚本在视图文件中并且我在控制器中创建实际内容本身并将其传递给jQuery，我怎么能在jQuery中使用$ l ['id']和$ c ['id']视图。 对不起，如果我没有意义，因为我自己仍然对这一切感到困惑。

view.php
<script type="text/javascript">
$(function(){
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("#tabs").tabs();   
        $('#dialog').dialog({   
                             modal: true
                            });          
})
</script>
<h1>Student Hub: Courses for <?php echo $studentName;?></h1>

<div id="tabs">
    <?php echo $content;?>
</div>



controller.php  
This is in a foreach loop
<div class="lessonDetails">
    <p><a href="#lessonInfo'.$l['id'].'">Lesson Details:</a><p>
    <div id="lessonDialog'.$l['id'].'" title="Lesson Details">
    '.$l['name'].'
    </div>
</div>  

<div class="courseDetails">
    <p><a href="#courseInfo'.$c['id'].'">Course Timetable & Resources</a><p>
    <div id="courseDialog'.$c['id'].'" title="Course Details">
    <p>'.$c['fullname'].'</p>
    <p>'.$c['summary'].'</p>
    <p>Upcoming Lessons: </p>
</div>                                                                  

Answer 1

技术答案是你不是因为一个是服务器端语言而一个是客户端语言; 你不能通过JavaScript（jQuery）访问PHP变量。 但是，您可以在生成时将PHP变量放入HTML页面，然后使用JavaScript或jQuery进行选择。

阅读你的场景，我认为你过于复杂的事情。 想想你的应用; 不要考虑技术方面，而应该考虑应该如何布局。 我猜你有一个学生控制器，一个课程控制器和一个课程控制器。 那些控制器将具有被称为view或类似的动作，然后这些动作将采用ID来显示特定的学生/课程/课程。

在HTML页面/视图/模板中，您应该只拥有vanilla URL。 然后应该使用JavaScript来增强网站。 所以在你的情况下，我会将其标记为类似如下：

<ul class="courses">
<?php foreach ($courses as $course): ?>
  <li><a href="/courses/view/<?php echo $course->id; ?>"><?php echo $course->title; ?></a></li>
<?php endforeach; ?>
</ul>

然后，在外部JavaScript文件中，有一个函数可以侦听<a>标记上的单击，而不是导航到该URL，而是在弹出/模式窗口中显示页面内容。

<script>
    $('.courses a').click(function(e) {
        e.preventDefault();
        // load external page and display it in a modal
    });
</script>

这样，如果由于某种原因JavaScript不可用，那么用户将被带到课程详细信息页面。 如果他们确实有JavaScript，那么他们会得到一个奇特的模态弹出窗口。

希望这可以帮助。 如果您需要清理任何东西，请告诉我，因为我在几个JD和Cokes之后的早些时候写了这个！

Answer 2

你可以在每个链接中创建一些额外的属性，并使用jQuery使用attr函数$（'a'）。attr（'courses'）检索信息。

有些喜欢

<a href="#" class=".information" teacher="idTeacher" course="idCourse" >list </a>

然后使用jquery

$('.information').click(function(){
teacher= $(this).attr('teacher');
course=$(this).attr('course');



});

记得使用$（'。information'）。live（）如果你使用一些AJAX从服务器获取数据并解析它来创建链接

Answer 3

也许你可以创建具有隐藏值的表单。

<?php foreach($lesson as $l): ?>
  <form method="POST" action="">
    <input type="hidden" name="lesson_id" value="<?php echo $l['id']; ?>" />  
    <a href="#" class="model_window">Click</a>
  </form>
<?php endforeach; ?>

JavaScript的：

$(document).ready(function() {
  $('.modal_window').click(function() {
    var form = $(this).closest('form');
    var lesson_id = $(form).find('input[name=lesson_id]').val();

    // Do something with lesson_id
  });
});

课程的想法是一样的。

** * ** *编辑* ** * ****

也许你可以尝试使用输入数组。 假设你有类似的东西

<input type="hidden" name="courses[]" value="1" />  
<input type="hidden" name="courses[]" value="2" />  

JavaScript的：

var courses = $(form).find('input[name^=courses]');
$(courses).each(function() {
  var course = $(this).val();
});

Answer 4

您可以在JavaScript代码中放置代码。 由于该代码是服务器端，因此它将“呈现”到您的JavaScript客户端代码。 因此，您的JavaScript可以访问PHP脚本存储的值。

Answer 5

这是使用jQueryUI对话框的解决方案。 不需要ID，但是如果需要，则将它们作为数据属性添加到该链接

<p><a href="#courseInfo'.$c['id'].'" data-id="'.$c['id'].'" >Course Timetable & Resources</a><p>

这允许使用jQuery data（）方法轻松获取ID。

每次使用都会创建并销毁对话框。 正如评论中所述，不知道对话框中的内容是什么。 如果它是来自href的ajax，我可以轻松调整

$('.lessonDetails a, .courseDetails a').click(function(){
    var $this=$(this);
    /* if need the id associated to link*/
    var id=$this.data('id');    

    var content= ''/* ???????   */  

    var title=$this.parent().next().attr('title')
    loadDialog(title, content);
    return false; /* stop browser following href*/

})


function loadDialog(title, content) {

    var dialogOpts = {
        modal: true,
        title: title,
        width: 800,
        close: function() {
            /* remove this dialog from DOM on close*/
            $(this).remove()
        }
    };
    $('<div>').append(content).dialog(dialogOpts);  

}