根據php變量的值使用Java隱藏div

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 ，則顯示$topsellers == true div，如果選擇了最近訂購的值並且$reorder為true，則僅顯示那些groupcontainer div。

我希望這是有道理的。 我覺得這些東西都在那里，但我需要幫助將它們與邏輯和語法聯系起來。

UPDATE（新的嘗試解決方案）：

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變量將始終被首先設置。 替代方法是通過rest / ajax請求“詢問php”值是什么，然后根據結果繼續計算。