Question

我目前在我的laravel刀片中有一个选择框：

<div style="text-align:center;">
   <div>
    <span style="color:#fff;"><strong>Sort by:</strong></span>
    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
      <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="" >Popularity</option>
      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="">Recently Ordered </option>
     </select>
   </div>

我想使用JS根据PHP变量的值显示/隐藏我的.groupcontainer div。我有一个创建PHP变量$topsellers和$reorder的函数。所以我想将我的选项popularity映射到$topsellers，将Recently Ordered选项映射到$reorder

我有一些我正在玩的JS，但我不知道如何正确地做到这一点，但是，它提出了一个想法：

<script type="text/javascript">
$('#filterText').on('change', function () {
if (this.value == '') {
  $(".groupcontainer").show();
} else {
  $(".groupcontainer").hide();
}
});
</script>

但基本上，我想说：

如果选择了值受欢迎程度并$topsellers == true，则显示groupcontainer div，如果选择了最近排序的值并且$reorder为真，则只显示那些groupcontainer div。

我希望这是有道理的。我觉得这些碎片在那里，但我需要帮助将它们与逻辑和语法联系起来。

更新（新尝试的解决方案）：

JS：

<script type="text/javascript">

$('#filterText').on('change', function () {

var topsellers = "<?php echo $pgroups->topseller; ?>";
var reorder    = "<?php echo $pgroups->reorder; ?>";

 var currentVal = $(this).val();

 if (currentVal == 'popularity' && topsellers == "true" || currentVal == 'recently_ordered' && reorder == "true") {
   $(".groupcontainer").show();
 } else {
   $(".groupcontainer").hide();
 }
});
</script>

HTML /选择框：

    <div style="text-align:center;">
                                <div>
                                    <span style="color:#fff;"><strong>Sort by:</strong></span>
                                    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
                                        <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
                                      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="popularity" >Popularity</option>
                                      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option>
                                    </select>
                                </div>
                            </div>

Answer 1

您可以为这些值添加隐藏的输入，例如：

<input class="topsellers" value="{{$topsellers}}" />
<input class="reorder" value="{{$reorder}}" />

或者您可以将变量放到Js变量中，如：

var topsellers = "<?php echo $topsellers; ?>";
var reorder    = "<?php echo $reorder; ?>";

然后在JS代码的条件中使用这些值，例如：

$(function(){
    var topsellers = "<?php echo $topsellers; ?>";
    var reorder    = "<?php echo $reorder; ?>";

    $('#filterText').on('change', function() {
      var currentVal = $(this).val();

      if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") {
        $(".groupcontainer").show();
      } else {
        $(".groupcontainer").hide();
      }
    });
});

希望这有帮助。

Answer 2

由于PHP是一种后端语言，因此必须在浏览器级别的javascript上下文中公开变量。要做到这一点，你最终会做的是这样的事情：

<script type="text/javascript">
var somePHPVariable = "<?php echo $SOMEVAR; ?>";
...
</script>

现在，它为您提供了javascript级别的PHP变量，因此您可以对其进行操作，就像使用任何其他javascript变量一样。请记住，PHP在javascript之前渲染/计算，因此您的php变量将始终首先设置。替代方案是＆＃34;问php＆＃34;通过rest / ajax请求值是什么，然后根据结果继续计算。

使用基于php变量

2 个答案: