web-dev-qa-db-ja.com

メニューの<li>リンクまたはonClickを使用して変数を設定します

週と日ごとに配列データを表示するページのメニューを作成しました。メニューには、Day-1のリンクが配置されています| 2日目| 3日目... 7日目まで。次に、配列から日の行を選択してページにコンテンツを表示するために使用する変数$ day_numberがあります。 $ day_numberの値を変更することで、ページに表示される日を手動で変更できます。クリック時に変数を更新するメニューを設定したい。

メニュー項目ごとにonClick関数呼び出しを設定できましたが、関数の外で変数$ day_numberを設定する問題があります。から関数を呼び出しているので、戻り結果を使用できません。

現在のメニュー構造は次のとおりです。 onClick関数呼び出しを使用する以外の別のオプションを利用できます。

<ul class="topnav" id="myTopnav">
    <li class="dayLink" id="day_1"><a href="#" onClick="setDay('Day1');">Day 1</a></li>
    <li class="dayLink" id="day_2"><a href="#" onClick="setDay('Day2');">Day 2</a></li>
    <li class="dayLink" id="day_3"><a href="#" onClick="setDay('Day3');">Day 3</a></li>
    <li class="dayLink" id="day_4"><a href="#" onClick="setDay('Day4');">Day 4</a></li>
    <li class="dayLink" id="day_5"><a href="#" onClick="setDay('Day5');">Day 5</a></li>
    <li class="dayLink" id="day_6"><a href="#" onClick="setDay('Day6');">Day 6</a></li>
    <li class="dayLink" id="day_7"><a href="#" onClick="setDay('Day7');">Day 7</a></li>
</ul>

これがonClickによって実行される関数です。 setDay値を渡すため、クリックされた曜日のリンクがわかります。これは正常に機能しますが、クリックイベントで関数の外側の$ day_numberの値を設定する必要があります。

<script type="text/javascript">
function setDay($day)
{
    console.log($day);
}
</script>
phpfunctionsjavascript
1
David Cook

これにより、ajaxを使用して値を渡すことができ、PHPスクリプトの$ _POSTから値を取得できます。

jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
     var li_id = jQuery(this).closest('.dayLink').attr('id');
     jQuery.ajax({
        url: 'url_to_php_script',
        data: {dayValue: li_id,action:call_to_ajax},
        method: 'POST',
        success: function(res){
            console.log(res);
        }
     })
  });
});

閉じかっこが故障していました。

<?php
if(isset($_GET['li_id'])){
    $test = $_GET['li_id'];
    echo $test;
    }
?>

POSTメソッドで渡された値をエコーするための新しいphpスクリプトが追加されました。

以下は、phpファイル内のスクリプト全体です。

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
  var li_id = jQuery(this).closest('.dayLink').attr('id');
  jQuery.ajax({
    url: 'https://grat-itudefitness/wp-content/themes/divi-child-gratitudefitness/includes/b2p_program_navigation.php',
    data: {dayValue: li_id},
    method: 'POST',
    success: function(res){
      console.log(res);
      }
    })
  });
});
</script>

<?php
if(isset($_GET['li_id'])){
  $test = $_GET['li_id'];
  echo $test;
  }
?>

<!-- Exercise Menu -->
<ul class="topnav" id="myTopnav">
  <li class="dayLink" id="day_1"><a href="javascript:void(0)">Day 1</a></li>
  <li class="dayLink" id="day_2"><a href="javascript:void(0)">Day 2</a></li>       
  <li class="dayLink" id="day_3"><a href="javascript:void(0)">Day 3</a></li>
  <li class="dayLink" id="day_4"><a href="javascript:void(0)">Day 4</a></li>
  <li class="dayLink" id="day_5"><a href="javascript:void(0)">Day 5</a></li>
  <li class="dayLink" id="day_6"><a href="javascript:void(0)">Day 6</a></li>
  <li class="dayLink" id="day_7"><a href="javascript:void(0)">Day 7</a></li>
</ul>

必要なコード::

**テンプレートファイルに保持するコード**

<?php
  $actionName = 'callMyAjax';
  $nonce = wp_create_nonce($actionName);
?>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
  var li_id = jQuery(this).closest('.dayLink').attr('id');
  jQuery.ajax({
    url: 'https://example.com/wp-admin/admin-ajax.php',
    data: {dayValue: li_id,action:<?php echo $actionName; ?>,ajaxOrigin:<?php echo $nonce; ?>},
    method: 'POST',
    success: function(res){
      console.log(res);
      }
    })
  });
});
</script>

**関数に保持するコード**

<?php
function myAjaxHanlder()
{
  if(isset($_POST['ajaxOrigin']) && wp_verify_nonce($_POST['ajaxOrigin'], 'callMyAjax')){
    if(isset($_POST['li_id'])){
      $test = $_POST['li_id'];
      echo $test;
    }
  }
}
add_action('wp_ajax_callMyAjax', 'myAjaxHanlder' );
add_action('wp_ajax_nopriv_callMyAjax', 'myAjaxHanlder' );
?>
1
BlueSuiter