Question

我有以下表格：

<form id="currency" name="form" onsubmit="return redirect(this)">

    <div style="clear:both;text-align: center;">
        <select id="firstcurrency" class="selex" name="firstcurrency" style="float: left;">
            <option value="usd">USD</option>
            <option value="btc">BTC</option>
        </select>

        <span style="margin: 0 auto;">=</span>

        <select id="secondcurrency" class="selex" name="secondcurrency" style="float: right;">
            <option value="btc">RRR</option>
            <option value="xvg">XVG</option>
            <option value="xrp">XRP</option>
            <option value="ntx">NTX</option>
        </select>
        <p style="clear: both;"></p>


    <p><input class="button" type="submit" value="Redirect Me" ></p>
    <a href="convertitore-home"><img src="/images/invert.png">Invert select</a>
</form>

当我点击a标签（表单外）时，我希望它能做两件事： 1）在上面的表格中反转2 IDs中names和select的值2）在第一个float中从左到右更改select值在第二个select中从右到左。

点击a代码后，表单应该变为：

<form id="currency" name="form" onsubmit="return redirect(this)">

    <div style="clear:both;text-align: center;">
        <select id="secondcurrency" class="selex1" name="secondcurrency" style="float: right;">
            <option value="usd">USD</option>
            <option value="btc">BTC</option>
        </select>

        <span style="margin: 0 auto;">=</span>

        <select id="firstcurrency" class="selex2" name="firstcurrency" style="float: left;">
            <option value="btc">RRR</option>
            <option value="xvg">XVG</option>
            <option value="xrp">XRP</option>
            <option value="ntx">NTX</option>
        </select>
        <p style="clear: both;"></p>


    <p><input class="button" type="submit" value="Redirect Me" ></p>
    <a href="convertitore-home"><img src="/images/invert.png">Invert select</a>
</form>

每次按a标记时都应该再次执行此操作。

你会用什么Javascript代码来做？

Answer 1

为货币添加单独的css，然后使用：

$('#invert').click(function(){
    var firstCurr = $('#firstcurrency'),
        secondCurr = $('#secondcurrency'),
        tmpID = secondCurr.attr('id');
    secondCurr.attr('id',firstCurr.attr('id'));
    secondCurr.attr('name',firstCurr.attr('id'));
    firstCurr.attr('id',tmpID);
    firstCurr.attr('name',tmpID);
});

#secondcurrency {
  float:right;
}
#firstcurrency {
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="currency" name="form" onsubmit="return redirect(this)">

<div style="clear:both;text-align: center;">
  <select id="firstcurrency" class="selex" name="firstcurrency">
    <option value="usd">USD</option>
    <option value="btc">BTC</option>
  </select>

  <span style="margin: 0 auto;">=</span>

  <select id="secondcurrency" class="selex" name="secondcurrency">
    <option value="btc">RRR</option>
    <option value="xvg">XVG</option>
    <option value="xrp">XRP</option>
    <option value="ntx">NTX</option>
  </select>
  <p style="clear: both;"></p>
</div>

   <p><input class="button" type="submit" value="Redirect Me" ></p>

   <a id="invert" href="javascript:void(0)"><!--href="convertitore-home"<img src="/images/invert.png">-->Invert select</a>

使用Javascript在表单中反转ID的名称

1 个答案: