Question

我有一个带有以下html的“目的地”表。

<table align = "center" class="table table-bordered" style = "border-radius: 15px;">

        <tr>
           <th>Destination</th>
           <th>Description</th>
           <th>Price</th>
        </tr>
        <tr>
           <td>Villa Jibacoa <br><img style= "height:150px; width:170px; float:left;"src = "images/Villa.jpg"/></td>
           <td>
            <ul>

              <li>255 rooms</li>
              <li>One 9-storey building</li>
              <li>4 restaurants</li>
              <li>5 bars</li>
              <li>Pool</li>
              <li>110 and 220 volts (adaptor required)</li>
            </ul>

            </td>
           <td>$784 <div style="position: relative; margin-top: 40px;"><button  id = "first" type="button" onclick = "SeatAssignment(1)" class="btn btn-success">Book Now!</button></div></td>
        </tr>
        <tr>
           <td>Gran Caribe Puntarena <br><img style= "height:150px; width:170px; float:left;"src = "images/grandcarib.jpg"/></td>
           <td> 
              <ul>

              <li>110 rooms</li>
              <li>Bungalow-style villas</li>
              <li>2 restaurants</li>
              <li>2 bars</li>
              <li>Pools</li>
              <li>220 volts (adaptor required)</li>
            </ul>
           </td>
           <td> $947 <div style="position: relative; margin-top: 40px;"><button  type="button" onclick = "SeatAssignment(2)" class="btn btn-success">Book Now!</button></div></td>
        </tr>

在另一个html文件中我有一个计算器表单。我有它，所以根据用户输入的价格将返回其价格范围内的旅行。这是表格：

<form onSubmit="return MoneyForTrip();">
<h1> Enter the amount of money you would like to spend on your next trip. </h1><br>

        <div class="input-group">
          <span class="input-group-addon">$</span>
          <input type="text" id= "moneyfortrip" class="form-control">

        </div>
        <br>
        <button type="submit" class="btn btn-default">Show My Trips</button>

        </form>

它传递的Javascript函数提交：

function MoneyForTrip()
{


var money = parseInt(document.getElementById('moneyfortrip').value);

if (money <= 800)
{

}

else if (money > 800 && money <=1200)
{

}

else if (money > 1200 && money <=2000)
{

}
else if (money > 2000)
{

}

else
{

}
return false;

}

不确定在if和else if语句中放入什么内容。我希望它取决于用户的输入属于哪个括号，它将在该价格范围内显示行程。我想要一张表格列出与我的计算器表单页面在同一页面上的适当行程。

有什么想法吗？谢谢！

Answer 1

常见的模式是将属性应用于元素以对其进行分类，然后使用属性有条件地隐藏或显示所需的元素。

以下是有条件地显示行的JS Fiddle示例。注意：我使用jQuery作为document.getElementByClassName仍然不能在浏览器中完全支持：

http://jsfiddle.net/eqkmv/1/

这是一个增强的javascript方法。它将隐藏所有具有名为“trip-result”的类的元素。然后它将显示与if语句匹配的元素。

function MoneyForTrip() {
    var money = parseInt(document.getElementById('moneyfortrip').value);

    $('.trip-result').hide();

    if (money <= 800) {
        $('.trip-less-800').show();
    }

    if (money > 800 && money <= 1200) {
        $('.trip-800-1200').show();
    }
}

这是html的重要更新。注意到它有两个类。一个在我们匹配条件时识别它。并且当我们想要隐藏它时识别它。而且，它开始时是不可见的。

<tr class="trip-less-800 trip-result" style="display:none">

Answer 2

有很多方法。例如，您可以将一个类分配给不同价格范围内的不同表行，然后根据需要使用JavaScript使它们可见或不可见。

如何根据价格显示目的地表

2 个答案: