无法将PHP集成到jQuery脚本中

时间：2018-12-07 13:26:33

标签： php jquery

我无法将php集成到jQuery中。我试图将这三行输入到jQuery脚本中。

PHP脚本（1） 

$jquery=NULL;
$h=1;
for($i=1;$i<=3;$i++){
    $jquery .= '
    $("#Line'.$h.'Ball'.$i.'").val(texts['.($i-1).']);';
}

此代码生成文本：

$("#Line1Ball1").val(texts[0]);

$("#Line1Ball2").val(texts[1]);

$("#Line1Ball3").val(texts[2]);

jQuery脚本 

<?php echo '
<script type="text/javascript">
$(document).ready(function(){
    var limit = 3;
    $("div.SelectionAreaNumbersOne").on("click", "div", function(e){
        e.preventDefault();
        if($("div.SelectionAreaNumbersOne .selectednumber").length >= limit) {

            if($("div.SelectionAreaNumbersOne .selectednumber").length == limit) {
                var texts= $("div.SelectionAreaNumbersOne .selectednumber").map(function() { return $(this).text(); }).get();
                '.$jquery.'
            }

            if($(this).hasClass("selectednumber")) { $(this).toggleClass("selectednumber"); }
        }else{
            $(this).toggleClass("selectednumber");
        }
    });
});
</script>';
?>

但是在PHP中手动键入这些行。而不是动态创建线条。

可以运行的PHP脚本（2）。

    $jquery = '
$("#Line1Ball1").val(texts[0]);
$("#Line1Ball2").val(texts[1]);
$("#Line1Ball3").val(texts[2]);
';

我在做什么错了？

更新

echo PHP 1 

<script type="text/javascript">
$(document).ready(function(){
    var limit = 3;
    $("div.SelectionAreaNumbersOne").on("click", "div", function(e){
        e.preventDefault();
        if($("div.SelectionAreaNumbersOne .selectednumber").length >= limit) {

if($("div.SelectionAreaNumbersOne .selectednumber").length == limit) {
    var texts= $("div.SelectionAreaNumbersOne .selectednumber").map(function() { return $(this).text(); }).get();

        $("#Line1Ball1").val(texts[0]);
        $("#Line1Ball2").val(texts[1]);
        $("#Line1Ball3").val(texts[2]);
}

if($(this).hasClass("selectednumber")) { $(this).toggleClass("selectednumber"); }
        }else{
$(this).toggleClass("selectednumber");
        }
    });

echo PHP 2 

<script type="text/javascript">
$(document).ready(function(){
    var limit = 3;
    $("div.SelectionAreaNumbersOne").on("click", "div", function(e){
        e.preventDefault();
        if($("div.SelectionAreaNumbersOne .selectednumber").length >= limit) {

if($("div.SelectionAreaNumbersOne .selectednumber").length == limit) {
    var texts= $("div.SelectionAreaNumbersOne .selectednumber").map(function() { return $(this).text(); }).get();

        $("#Line1Ball1").val(texts[0]);
        $("#Line1Ball2").val(texts[1]);
        $("#Line1Ball3").val(texts[2]);

}

if($(this).hasClass("selectednumber")) { $(this).toggleClass("selectednumber"); }
        }else{
$(this).toggleClass("selectednumber");
        }
    });

这是我的代码脚本：

PHP1（不起作用）Pastebin代码https://pastebin.com/h3h3RzHc

PHP2（有效）粘贴代码https://pastebin.com/fbZwAmJW

2 个答案:

答案 0 :(得分：2)

代替使用'.$jquery.'
您应该使用：<?php echo $jquery; ?>

答案 1 :(得分：1)

正如我在评论中所说，删除所有重复项，代码有效。

最大的干预是从循环中删除jQuery函数，从而仅创建一个可与页面中每个SelectionAreaNumbers div一起使用的函数。

我更改了您的PHP循环

$jquery=NULL;
$h=1;
for($i=1;$i<=3;$i++){
    $jquery .= '
    $("#Line'.$h.'Ball'.$i.'").val(texts['.($i-1).']);';
}

使用jQuery的

var texts = $(".selectednumber", $thisArea).map(function () {
    return $(this).text();
}).get();

$.each(texts, function (i, val) {
    $("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
})

这是jQuery脚本（我试图从您的脚本中尽可能少地更改）：

$(document).ready(function () {
    var limit = <?php echo $CompanyStarterSettings['DrawNumberofBalls']; ?>;

    $(".SelectionAreaNumbers").on("click", "div", function (e) {

        e.preventDefault();
        var $this = $(this);
        var $thisArea = $(this).closest(".SelectionAreaNumbers");

        if ($(".selectednumber", $thisArea).length >= limit) {
            if ($this.hasClass("selectednumber")) {
                $this.toggleClass("selectednumber");
            }
        } else {
            $this.toggleClass("selectednumber");
        }

        if ($(".selectednumber", $thisArea).length == limit) {

            var texts = $(".selectednumber", $thisArea).map(function () {
                return $(this).text();
            }).get();

            $.each(texts, function (i, val) {
                $("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
            })
        }
    });
});

在PHP中，我仅删除了您的ID（输入中的ID除外，请放心；-））。

这是您所有带有php代码的文件：

<!DOCTYPE html>
<html>
<head>

    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <META NAME="description" CONTENT="">
    <META NAME="viewport" CONTENT="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .NumberSelecton { background:#fff; position:relative; top: 39%; left:20%; width:292px; }
        .NumberTicketsContainer { position: absolute; top: 38%; left:2%; width:49%; }
        .NumberTicketsContainer P { margin:0; text-align: center; font-size: large; letter-spacing:-1px; }
        .NumberTicketsContainer strong { font-weight:normal; }
        .NumberSelectonContainer { position:relative; width:100%; }
        .NumberSelectonContainer .TextArea { position:absolute; top:10px; left:0px; width:100px; }
        .NumberSelectonContainer .SelectionArea { position:relative; }
        .NumberSelectonContainer .SelectionArea .SelectionAreaNumbers { text-align:center; border: 1px solid #222; }
        .NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .GridNumber { display: inline-block; text-align: center; width:27px; height:48px; line-height: 47px; font-weight: 900; cursor: pointer;   border: 1px solid #222; }
        .NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .selectednumber { background:#222; color:#fff; }

    </style>    
</head>
<body>
<div id="Background">

    <h3>This Script works</h3>


<?php
    function ConvertNumbertoWord($NumbertoWord) {
        switch($NumbertoWord){
            CASE 1:     $NumbertoWord="One";        break;
            CASE 2:     $NumbertoWord="Two";        break;
            CASE 3:     $NumbertoWord="Three";      break;
            CASE 4:     $NumbertoWord="Four";       break;
            CASE 5:     $NumbertoWord="Five";       break;
            CASE 6:     $NumbertoWord="Six";        break;
            CASE 7:     $NumbertoWord="Seven";      break;
            CASE 8:     $NumbertoWord="Eigth";      break;
            CASE 9:     $NumbertoWord="Nine";       break;
            CASE 10:    $NumbertoWord="Ten";        break;
            CASE 11:    $NumbertoWord="Eleven";     break;
            CASE 12:    $NumbertoWord="Twelve";     break;
            CASE 13:    $NumbertoWord="Thirteen";   break;
            CASE 14:    $NumbertoWord="Fourteen";   break;
            CASE 15:    $NumbertoWord="Fifteen";    break;
        }
        return $NumbertoWord;
    }

    echo '
        <div id="NextDrawCountDown"></div>
        <form name="" id="" method="POST" action="" onSubmit="return validateFields()">';

            $DisplayMaximumTickets = 3;
            $CompanyStarterSettings['DrawNumberofBalls'] = 3;
            $CompanyStarterSettings['DrawBallStartNumber'] = 1;
            $CompanyStarterSettings['DrawBallFinishNumber'] = 40;
            $NoTickets = 3;

                $FirstConvertNumbertoWord = 'One';
                $SecondConvertNumbertoWord = 'Two';
                $ThirdConvertNumbertoWord = 'Three';
                $SelectedTicketsOption[$NoTickets] = 'checked';

        for($h=1;$h<=$DisplayMaximumTickets;$h++){

            $TicketOption_Group = 'TicketOptionGroup1';

            echo '
        <div class="TicketContainer">
        <div class="Header">
            <div class="headerone"></div>
            <div class="headertwo"></div>
        </div>

                <div class="NumberTicketsContainer">';

            echo '
                </div>
            <div class="NumberSelecton">
                <div class="NumberSelectonContainer">
                    <div class="SelectionArea">
                        <div class="SelectionAreaNumbers">';

                    for($j=$CompanyStarterSettings['DrawBallStartNumber'];$j<=$CompanyStarterSettings['DrawBallFinishNumber'];$j++){
                        echo '<div class="GridNumber" >'.$j.'</div>';
                    }

                    for($i=1;$i<=$CompanyStarterSettings['DrawNumberofBalls'];$i++){
                        echo '<input type="text" name="LineNumbers[]" id="Line'.$h.'Ball'.$i.'" class="test" style="width:50px;" />'; 
                    }


                echo '
                        </div> <!-- Endof SelectionAreaNumbers -->
                    </div> <!-- Endof SelectionArea -->

                </div> <!-- Endof NumberSelectonContainer -->
            </div> <!-- Endof NumberSelecton-->


            <div class="WinnerDetailsContainer">
                <div class="WinnersAdvancePlay">

                <div class="Footer">
                </div>
               </div> <!-- Endof WinnersAdvancePlay -->
            </div> <!-- Endof WinnerDetailsContainer -->
         </div> <!-- Endof Class TicketContainer -->';

        }

        echo '
        <div id="SubmitTickets">
            <p class="right"><input type="submit" name="SubmitTicketButton" id="SubmitTicketButton" class="SubmitTicketButton" value="Button" /></p>
        </div> <!-- Endof SubmitTickets -->
        </form>';
?>

    <script type="text/javascript">
        $(document).ready(function(){
            var limit = <?php echo $CompanyStarterSettings['DrawNumberofBalls']; ?>;

            $(".SelectionAreaNumbers").on("click", "div", function(e){

                e.preventDefault();
                var $this = $(this);
                var $thisArea =$(this).closest(".SelectionAreaNumbers");

                if($(".selectednumber", $thisArea).length >= limit) {
                    if($this.hasClass("selectednumber")) { $this.toggleClass("selectednumber"); }
                }else{
                    $this.toggleClass("selectednumber");
                }

                if($(".selectednumber", $thisArea).length == limit) {

                    var texts= $(".selectednumber", $thisArea).map(function() { return $(this).text(); }).get();

                    $.each(texts, function( i, val ) {
                        $("input[id$='Ball"+(i+1)+"']", $thisArea).val(val);
                    })
                }
            });
        });
    </script>
</div>
</body>
</html>

最后，我在这里放了一个编译版本，以便您可以看到它的工作原理。

$(document).ready(function () {
	var limit = 3;

	$(".SelectionAreaNumbers").on("click", "div", function (e) {

		e.preventDefault();
		var $this = $(this);
		var $thisArea = $(this).closest(".SelectionAreaNumbers");

		if ($(".selectednumber", $thisArea).length >= limit) {
			if ($this.hasClass("selectednumber")) {
				$this.toggleClass("selectednumber");
			}
		} else {
			$this.toggleClass("selectednumber");
		}

		if ($(".selectednumber", $thisArea).length == limit) {

			var texts = $(".selectednumber", $thisArea).map(function () {
				return $(this).text();
			}).get();

			$.each(texts, function (i, val) {
				$("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
			})
		}
	});
});
.NumberSelecton {
	background: #fff;
	position: relative;
	top: 39%;
	left: 20%;
	width: 292px;
}

.NumberTicketsContainer {
	position: absolute;
	top: 38%;
	left: 2%;
	width: 49%;
}

.NumberTicketsContainer P {
	margin: 0;
	text-align: center;
	font-size: large;
	letter-spacing: -1px;
}

.NumberTicketsContainer strong {
	font-weight: normal;
}

.NumberSelectonContainer {
	position: relative;
	width: 100%;
}

.NumberSelectonContainer .TextArea {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 100px;
}

.NumberSelectonContainer .SelectionArea {
	position: relative;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers {
	text-align: center;
	border: 1px solid #222;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .GridNumber {
	display: inline-block;
	text-align: center;
	width: 27px;
	height: 48px;
	line-height: 47px;
	font-weight: 900;
	cursor: pointer;
	border: 1px solid #222;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .selectednumber {
	background: #222;
	color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Background">
<h3>This Script works</h3>
<div id="NextDrawCountDown"></div>
  <form name="" id="" method="POST" action="" onSubmit="return validateFields()">
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line1Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line1Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line1Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line2Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line2Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line2Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line3Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line3Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line3Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div id="SubmitTickets">
      <p class="right">
        <input type="submit" name="SubmitTicketButton" id="SubmitTicketButton" class="SubmitTicketButton" value="Button" />
      </p>
    </div>
    <!-- Endof SubmitTickets -->
  </form>
</div>

也许这不是确定的解决方案，但我认为这是完成工作的一个很好的起点。以此为例，我只是想向您展示，删除所有重复项，您的代码就可以正常工作。

相关问题
最新问题