Question

我正在尝试使用按钮对由PHP调用的动态数据集进行排序。现在，我只是想按一个按钮，按最高的项目排列它们。

在catalog.view.php中

 <div class="pricing-buttons">
    <button type="button" class="highest btn btn-outline- 
 primary">highest price</button> <button type="button" class="lowest 
  btn btn-outline-info">lowest price</button>
  </div>
<section class="container-fluid">
    <div class="row">
       <?php if (isset($items)) { ?>
        <?php foreach ( $items as $item) : ?>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="container-fluid">
                    <article class="cards">
                              <div class="col-12">


 <section class="card-holder" id="<?php echo $item['code']; ?>">


 <section class="card code">

 <ul>

  <h2 class="cat-order-code bottom-drop center" 
 data-code="<?php echo $item['code']; ?>">Code: <?php echo $item['code']; ?></h2>


<h3 class="cat-order-name center"><?php echo $item['name']; ?></h3>


 <img class="cat-order-image thumbnail box-image-width" 
 src="<?php echo IMAGES .  $item['image']; ?>" 
 alt="<?php echo $item['description']; ?>">


  <!-- part I am working on here the data-value ['price'] -->                                                    
 <li class="cat-order-price" data-value="<?php echo $item['price']; ?>">Price:
 <?php echo $price = ($item['price'] == 0 ? 'Make offer' :  '$' . $item['price']);
 ?></li>


 <h4 class="cat-order-sold sale" data-sold="<?php echo $item['sold']; ?>">
 <?php echo $sold = ($item['sold'] == 0 ? 'For Sale' : 'sold'); ?></h4>


 <a class="cat-order-btn btn btn-lg btn-outline-danger btn-width 
 center-block"  href='details.php?id=<?php echo $item['id']?>'>
 <?php echo $item['id']; ?></a>

  </ul>

  </section>

 </section>

 </div>

 </article>

 </div>

 </div>

 <?php endforeach; ?>

 <?php } ?>

 </div>

 </section>

由于我还是JAvaScript和Es6的新手，所以我正在大量工作。到目前为止，我的javascript文件中已有

 const highest = document.querySelector('.highest');
 const priceValue = 
 Array.from(document.querySelectorAll('[data-value]');
 const price = priceValue;
 price.map(price => price.dataset.value);
 console.log(price);

我的问题是为什么地图无法显示？我知道我有很长的路要走，但我想了解为什么我的map函数返回的值与Array.from函数的值相同？

任何帮助都将是感激的。

Answer 1

您应将map操作的结果分配给变量，就像这样

const result = price.map(price => price.dataset.value);
console.log(result);

如果要对values数组进行排序，现在可以使用sort方法对其进行排序

result.sort();

此外，具有与数组同名的元素变量可能会引起混淆。这将是一个更具可读性的选择

const result = price.map(p => p.dataset.value);

使用javascript对数据集进行排序

1 个答案: