代码之家 › 专栏 › 技术社区 › Inderjeet

Javascript:如何编写文档。php中while循环内的getElementsByClassName()

jquery php javascript

Inderjeet · 技术社区 · 8 年前

如何在php中编写for循环while loop?

我有 numDifferentiation() javascript函数。我想在里面写这个函数() <span class="price"></span> 。我试过了 document.write() 但它取代了整个html页面。如何编写 document.getElementsByClassName('price')[].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>'); php的内部while循环。

我试过:

<?php
for($=0;$i<10;$i++){
?>
<script>
 document.getElementsByClassName('price')[<?php echo $i ?>].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
</script>
<?php
}
?>

我的整个代码javascript函数,通过ajax在keyup上提交表单。Ajax代码和PHP。

Javascript

function numDifferentiation(val) {
          if(val >= 10000000) val = (val/10000000).toFixed(2) + ' Cr';
          else if(val >= 100000) val = (val/100000).toFixed(2) + ' Lac';
          else if(val >= 1000) val = (val/1000).toFixed(2) + ' K';
          return val;
}

通过Ajax提交表单

$( document ).ready( function () {
        $( ".searchTerm" ).keyup( function () {
            var text = $( this ).val();

            $.ajax( {
                type: "POST",
                url: "read-project.php",
                data: 'text=' + text,
                dataType: "html",
                async: false,
                success: function ( data ) {
                        if(text == ""){
                            $( '.search_box' ).hide();
                            $( '#project-list-all' ).show();
                            $( '.search_box' ).html("");
                        }


                        else if(text.length >= 2){
                            $( '.search_box' ).show();
                            $( '.search_box' ).html( data );
                        $("#project-list-all:empty").parent().hide();
                        $( '#project-list-all' ).hide();
                        }
                },
                error: function ( errorThrown ) {
                    alert( errorThrown );
                    alert( "There is an error with AJAX!" );
                }

            } );
        } );
    } );

PHP

<?php
require_once('config.php');
//require_once('config.php');

$text = $_POST['text'];

$result = $conn->query("select * from project where name LIKE '%$text%' or type LIKE '%$text%' or sector LIKE '%$text%' or city LIKE '%$text%' or builder LIKE '%$text%' LIMIT 6");


    if($result){
        echo '<ul>';
        if(mysqli_num_rows($result) > 0) {



        while ($row = $result->fetch_assoc()) 
        { 
            echo "<li>";
            ?>

                <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="flat-item" style="box-shadow: 2px 2px 9px #000; padding: 5px;">
                    <div class="flat-item-image">

                        <a href="project-details.php?id=<?php echo $row['id'] ?>"><img src="images/small_images/<?php echo $row['small_img']; ?>" alt=""></a>
                        <div class="flat-link">
                            <a href="project-details.php?id=<?php echo $row['id'] ?>">More Details</a>
                        </div>
                        <ul class="flat-desc">
                            <li>
                                    <h5 class="clr-white project-heading"><a href="project-details.php?id=<?php echo $row['id'] ?>"><?php echo $row['name'];?> </a></h5>
                                    <P class="uderline"></P>
                                    <p class="property-type"><?php echo $row['type'];?></p>
                            </li>

                        </ul>
                    </div>
                    <div class="flat-item-info">
                        <div class="flat-title-price">
                        <p class="pull-left"><img src="images/icons/location.png" alt=""><?php echo $row['sector'];?>,<?php echo $row['city'];?></p>
                            <span class="price" id="price"><script>
                            document.getElementsByClassName('price')[].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
                            </script></span>
                        </div>

                    </div>
                </div>

            <?php 
            echo '<li>';
        }


        echo '</ul>';
    }

    else {
            echo '<h2 style="color: red;">No Result Found: '.$text.'</h2>';
        }
}

?>

1 回复 | 直到 8 年前

CertainPerformance 8 年前

脚本不应该像那样放在HTML内容中-理想情况下,将它们放在单独的 .js 文件。

请注意,在同一文档中有多个ID相同的元素是无效的HTML:remove id="price" 。

给出 .price 使用PHP创建数据属性,然后在 。价格 s运行numDifferentiation。例如:

<span class="price" data-msp="<?php echo $row['msp']; ?>">

然后,在Javascript中(在其他地方,只编写一次):

document.querySelectorAll('.price').forEach((priceSpan) => {
  priceSpan.textContent = numDifferentiation(priceSpan.getAttribute('data-msp'));
});

在页面加载时运行。

您可能也应该改进NumDifferentication:

function numDifferentiation(val) {
  if(val >= 10000000) return (val/10000000).toFixed(2) + ' Cr';
  else if(val >= 100000) return (val/100000).toFixed(2) + ' Lac';
  else if(val >= 1000) return (val/1000).toFixed(2) + ' K';
  return val;
}

(您不想重新分配参数,只想 return 找到所需条件时)