javascript - 单击功能中输入字段值不变

Question

在我之前的代码中，我使用了两个单独的输入字段 % 和 $ 值。 % 值代码:

<td>
    <input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
    %
</td>

$值代码:

<td> 
    $ 
    <input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)"  />
</td>

在我的新代码中，我将输入字段将两个字段更改为一个字段。 % 和 $ 值都加载单个输入字段贷款。我已在单击时设置了 % 和 $ 图标。现在输入字段默认 % 图标也是 %。当用户将图标 % 更改为 $ 时，该值也需要更改。

<div class="col-md-3 padding-rht">
    <input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />


</div>

<div class="col-md-1 padding-lft">
    <img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>

function changeColor(event, _src) {
    var fname = _src;
    var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
    //alert(ImageName);
    if (ImageName == "percent.png") {
        $(event.target).attr("src", "Content/Images/RedDoller.png");
    }
    else {
        $(event.target).attr("src", "Content/Images/percent.png");
   }
}

有人可以看一下吗？我尝试了很多方法，但都不起作用？提前致谢。

Answer 1

您的问题不是很清楚，但如果我理解正确的话，我认为您想要实现的是百分比和金额字段根据 $/% 图像切换可见性，对吗？

如果是这样，您需要做的是切换两个输入字段的可见性，并更改图像源。尝试下面的代码:

HTML/PHP:

<div class="col-md-3 padding-rht">
    <input id="pct" name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />

    <input id="amt" name="propertytaxamt" class="txt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)"  />
</div>

<div class="col-md-1 padding-lft">
    <img id="change" src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>

Javascript:

$(document).ready(function() {
    $("#amt").hide();

    $("#change").click(function() {
        changeColor(this);
    });
});

function changeColor(elem) {
    var $elem = $(elem);
    var ImageName = $elem.attr("src");
    ImageName = ImageName.substring(ImageName.lastIndexOf('/') + 1);
    if (ImageName == "percent.png") {
        $elem.attr("src", "Content/Images/RedDoller.png");
    } else {
        $elem.attr("src", "Content/Images/percent.png");
    }
    $("#pct, #amt").toggle();
}

演示该技术的 JS fiddle 示例如下:https://jsfiddle.net/ds8txa1j/