如何在悬停和onclick上交换文本

时间：2016-12-22 18:13:21

标签： javascript jquery css

我在捐款表格的顶部有一条默认消息，我希望它根据用户徘徊或点击的数量动态更改。

每个金额以及“€Other”都应该有相应的信息。例如：“€5.00我们可以做到这一点......”10.00欧元我们可以做到......“

如果选择了相应的选项，这些消息应在悬停时相应更改，但仍然可见。

如果用户取消选择以前选择的选项或未选择任何选项，则应重新显示默认消息。

我尝试了不同的方法但没有成功，我真的很感激帮助实现这一目标。

FIDDLE

HTML 

<p>Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">

    <label><input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
    <input type="number" class="textBox" name="amount" placeholder="€ Other">

    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="Donation">
    <input type="hidden" name="currency_code" value="EUR">
    <input type="hidden" name="lc" value="PT">
    <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
    <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


    <br style="clear: both;"/>
    <input class="donation-button" type="submit" value="Send Donation">

</form>

的JavaScript 

$('input.checkbutton').on('change', function() {
    $('input.checkbutton').not(this).prop('checked', false);
});

$(".textBox").focus(function() {
    $(".checkbutton").prop("checked", false);
});

$(".checkbutton").change(function() {
    if($(this).is(":checked")) { 
        $(".textBox").val(""); 
    } 
});

CSS 

body {
    box-sizing: border-box;
    padding: 50px;
    font-family: sans-serif; 
    font-size: 18px;
    text-align: center;
}

label {
    margin: 1%;
    float: left;
    background: #ccc;
    text-align: center;
    width: 18%;
}

label:hover {
    background: grey;
    color: #fff;
}

label span {
    text-align: center;
    box-sizing: border-box;
    padding: 10px 0;
    display: block;
}

label input {
    display: none;
    left: 0;
    top: -10px;
}

input:checked + span {
    background-color: black;
    color: #fff;
}

/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    appearance: none;
    margin: 0; 
}


.textBox {
    margin: 1%;
    float: left;
    background: #ccc;
    border: 0; 
    padding: 10px 0;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    width: 18%;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}

.textBox:focus {
    box-shadow:none;
    box-shadow:inset 0 0 4px 0 #000;
   -moz-box-shadow:inset 0 0 4px 0 #000;
   -wevkit-box-shadow:inset 0 0 4px 0 #000;
}

.donation-button {
    width: 98%;
    margin: 1%;
    border: 0;
    background: grey;
    color: white;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    padding: 10px 0 10px 0;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}
.donation-button:hover {
    background: black;
}

6 个答案:

答案 0 :(得分：2)

您可以将数据属性用于输入字段，数据可以保存文本。此外，为了实现所需的功能，您可以设置'flag'来检查选项是否被选中以及'lock'文本（因此在悬停时它不会改变）。像这样：

locked=false;
$('input.checkbutton').on('change', function() {
 $('#desc').text( $(this).data('text') );
if($(this).prop('checked')) {
locked=true;
}
else {
locked=false;
}
    $('input.checkbutton').not(this).prop('checked', false);
   
});

$(".textBox").focus(function() {
    $(".checkbutton").prop("checked", false);
});

$(".checkbutton").change(function() {
    if($(this).is(":checked")) { 
        $(".textBox").val(""); 
    } 
});
default_text="Choose below the amount of your donation";

$( 'label').hover(
  function() {

  if(!locked)
    $('#desc').text( $(this).children().data('text') );
  }, function() {
  if(!locked)
     $('#desc').text( default_text );
  }
);
body {
    box-sizing: border-box;
    padding: 50px;
    font-family: sans-serif; 
    font-size: 18px;
    text-align: center;
}

label {
    margin: 1%;
    float: left;
    background: #ccc;
    text-align: center;
    width: 18%;
}

label:hover {
    background: grey;
    color: #fff;
}

label span {
    text-align: center;
    box-sizing: border-box;
    padding: 10px 0;
    display: block;
}

label input {
    display: none;
    left: 0;
    top: -10px;
}

input:checked + span {
    background-color: black;
    color: #fff;
}

/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    appearance: none;
    margin: 0; 
}


.textBox {
    margin: 1%;
    float: left;
    background: #ccc;
    border: 0; 
    padding: 10px 0;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    width: 18%;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}

.textBox:focus {
    box-shadow:none;
    box-shadow:inset 0 0 4px 0 #000;
   -moz-box-shadow:inset 0 0 4px 0 #000;
   -wevkit-box-shadow:inset 0 0 4px 0 #000;
}

.donation-button {
    width: 98%;
    margin: 1%;
    border: 0;
    background: grey;
    color: white;
    text-align: center;
    font-family: sans-serif; 
    font-size: 18px;
    padding: 10px 0 10px 0;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For all Gecko based browsers */
    box-sizing: border-box;
}
.donation-button:hover {
    background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="desc">Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">

    <label><input type="checkbox" name="amount" class="checkbutton" value="5,00" data-text="With 5 euros we can..."><span>€05.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="10,00" data-text="With 10 euros we can..."><span>€10.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="15,00" data-text="With 15 euros we can..."><span>€15.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="20,00" data-text="With 20 euros we can..."><span>€20.00</span></label>
    <input type="number" class="textBox" name="amount" placeholder="€ Other">

    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="Donation">
    <input type="hidden" name="currency_code" value="EUR">
    <input type="hidden" name="lc" value="PT">
    <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
    <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


    <br style="clear: both;"/>
    <input class="donation-button" type="submit" value="Send Donation">

</form>

P.S。如果我不理解您的要求，并且您希望在悬停时更改文字，即使选择了选项，您也可以删除locked var ...

编辑：我认为它现在很完美：https://jsfiddle.net/y05uzdzc/基于您的描述。

答案 1 :(得分：2)

我认为这正是你所需要的。 JSFIDDLE

HTML未更改，但＆＃34; id＆＃34;的：

<p id="alert">Choose below the amount of your donation</p>

的Javascript 

var defaultTxt = $('#alert').text();
$('input.checkbutton').change( function() {
    $('input.checkbutton').not(this).prop('checked', false);
    if($(this).is(":checked")) { 
        $(".textBox").val(""); 
    }
    var check = $(this).prop('checked');
    var value = $(this).val();
    switch(value)
    {
        case("5,00"):
            if(check)
                $('#alert').text("with €5.00 we can accomplish this...");
            else
                $('#alert').text(defaultTxt);
        break;
        case("10,00"):
            if(check)
                $('#alert').text("With €10.00 we could do that...");
            else
                $('#alert').text(defaultTxt);
        break;
        case("15,00"):
            if(check)
                $('#alert').text("With €15.00 we could do that...");
            else
                $('#alert').text(defaultTxt);
        break;
        case("20,00"):
            if(check)
                $('#alert').text("With €20,00 we could do more than that...");
            else
                $('#alert').text(defaultTxt);
        break;
        default:
        $('#alert').text("");
        break;
    }
});

$('input.checkbutton').hover(function() {
    alert();
  },function() {

  }
);
$('input.checkbutton').parent().hover( 
    function() {
    var value = $(this).children('input.checkbutton').val();
    switch(value)
    {
        case("5,00"):
        $('#alert').text("with €5.00 we can accomplish this...");
        break;
        case("10,00"):
        $('#alert').text("With €10.00 we could do that...");
        break;
        case("15,00"):
        $('#alert').text("With €15.00 we could do that...");
        break;
        case("20,00"):
        $('#alert').text("With €20,00 we could do more than that...");
        break;
        default:
        $('#alert').text("");
        break;
    }
  }, function() {
    var othervalue = $('input.checkbutton:checked').val();
    switch(othervalue)
    {
        case("5,00"):
        $('#alert').text("with €5.00 we can accomplish this...");
        break;
        case("10,00"):
        $('#alert').text("With €10.00 we could do that...");
        break;
        case("15,00"):
        $('#alert').text("With €15.00 we could do that...");
        break;
        case("20,00"):
        $('#alert').text("With €20,00 we could do more than that...");
        break;
        default:
        $('#alert').text("");
        break;
    }
  }
);
$(".textBox").focus(function() {
    $(".checkbutton").prop("checked", false);
    $('#alert').text(defaultTxt);
});
$(".textBox").blur(function() {
        var txtVal = $(this).val();
        if(txtVal != "")
            $('#alert').text("With €"+ txtVal +" we could do that");
});

答案 2 :(得分：2)

大卫！最后我改进了:) 你可以通过data-alertOnHover分别在HTML中自定义你自己的消息，这些消息显示在按钮或textBox上的悬停状态和数据警告后显示选择按钮或在textBox中键入数字。它涵盖了所有州，也不那么繁琐。

另外

  

如果用户取消选择以前选择的选项或没有选项   选中后，将重新显示默认消息。

＆＃13;
＆＃13; 
var defaultTxt = $('#alert').text();
var checked;
$('input.checkbutton').change(function() {
  if ($(this).is(":checked")) {
    $(".textBox").val("");
  	$('#alert').text($(this).attr("data-alertAfter") + $(this).val());
    checked = $(this);
  }
  else
  {
  	$('#alert').text(defaultTxt);
    checked = undefined;
  }
  $('input.checkbutton').not(this).prop('checked', false);
});
$('.input-container').hover(
  function() {
    $('#alert').text($(this).children('input').attr("data-alertOnHover"));
  },
  function() {
    if (checked)
    	$('#alert').text($(checked).attr("data-alertAfter") + $(checked).val());
    else
    	$('#alert').text(defaultTxt);
  }
);
$(".textBox").focus(function() {
  checked = undefined;
	$(".checkbutton").prop("checked", false)
}).blur(function() {
  if ($(this).val() != "") {
  	checked = $(this);
  	$('#alert').text($(this).attr("data-alertAfter") + $(this).val())
  }
});
＆＃13; 
body {
  box-sizing: border-box;
  padding: 50px;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
}

label {
  margin: 1%;
  float: left;
  background: #ccc;
  text-align: center;
  width: 18%;
}

label:hover {
  background: grey;
  color: #fff;
}

label span {
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  display: block;
}

label input {
  display: none;
  left: 0;
  top: -10px;
}

input:checked + span {
  background-color: black;
  color: #fff;
}


/* Hide HTML5 Up and Down arrows in input type="number" */

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.textBox {
  margin: 1%;
  float: left;
  background: #ccc;
  border: 0;
  padding: 10px 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  width: 18%;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}

.textBox:focus {
  box-shadow: none;
  box-shadow: inset 0 0 4px 0 #000;
  -moz-box-shadow: inset 0 0 4px 0 #000;
  -wevkit-box-shadow: inset 0 0 4px 0 #000;
}

.donation-button {
  width: 98%;
  margin: 1%;
  border: 0;
  background: grey;
  color: white;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  padding: 10px 0 10px 0;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}

.donation-button:hover {
  background: black;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="alert">Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

  <input type="hidden" name="cmd" value="_donations">
  <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">

  <label class="input-container">
    <input type="checkbox" name="amount" class="checkbutton" value="5,00" data-alertOnHover="With €5.00 we can accomplish this..." data-alertAfter="Your donation will be €"><span>€05.00</span></label>
  <label class="input-container">
    <input type="checkbox" name="amount" class="checkbutton" value="10,00" data-alertOnHover="With €10.00 we could do that..." data-alertAfter="Your donation will be €"><span>€10.00</span></label>
  <label class="input-container">
    <input type="checkbox" name="amount" class="checkbutton" value="15,00" data-alertOnHover="With €15.00 we could do that..." data-alertAfter="Your donation will be €"><span>€15.00</span></label>
  <label class="input-container">
    <input type="checkbox" name="amount" class="checkbutton" value="20,00" data-alertOnHover="With €20,00 we could do more than that..." data-alertAfter="Your donation will be €"><span>€20.00</span></label>
  <span class="input-container">
    <input type="number" class="textBox" name="amount" placeholder="€ Other" data-alertOnHover="just type how much you want to donate..." data-alertAfter="Your donation will be €">
  </span>

  <input type="hidden" name="item_name" value="Donation">
  <input type="hidden" name="item_number" value="Donation">
  <input type="hidden" name="currency_code" value="EUR">
  <input type="hidden" name="lc" value="PT">
  <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
  <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


  <br style="clear: both;" />
  <input class="donation-button" type="submit" value="Send Donation">

</form>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

当我遇到这样的事情时，我会选择或创建一种方法来轻松区分其他输入。

独特的ID，使其快速，易于查找。在这个例子中，您的5欧元捐款将获得捐赠5的ID。

$("body").on("mouseover", "input", function () {
    if ($(this).attr("id") === "donation-5") {
        //  --> DO your hover thing.
    } else if (so forth and so on...){
        // .....
    }
})

另外，我考虑使用HTML5按钮标记。

啊是的......几乎忘记了，你想要监控两种事件类型

您需要两个＆＃39;事件听众＆＃39;

我上面列出的那个，以及后面的那个：

$("body").on("click", "input", function () {
    if ($(this).attr("id") === "donation-5") {
        //  --> DO your hover thing.
    } else if (so forth and so on...){
        // .....
    }
})

答案 4 :(得分：0)

首先，我认为您需要单选按钮而不是复选框。完成更改后，我会抓住change和hover个事件。

在更改时，您可以随时更新消息。在悬停时，查看是否已检查任何项目，如果是，请保留该消息，否则您可以更改它。

这是一个正在运行的例子：

＆＃13;
＆＃13; 
$(".donation").hover(function() {
  let checkCount = $("form .donation :checked").length;
  if (checkCount == 0) {
    setMessage(this);
  }
}).change(function() {
  setMessage(this);
});

function setMessage(item) {
  var text = $(item).text();
  $("#message").text("Thanks for pledge of " + text);
}
＆＃13; 
body {
  box-sizing: border-box;
  padding: 50px;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
}
label {
  margin: 1%;
  float: left;
  background: #ccc;
  text-align: center;
  width: 18%;
}
label:hover {
  background: grey;
  color: #fff;
}
label span {
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  display: block;
}
label input {
  display: none;
  left: 0;
  top: -10px;
}
input:checked + span {
  background-color: black;
  color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */

input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.textBox {
  margin: 1%;
  float: left;
  background: #ccc;
  border: 0;
  padding: 10px 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  width: 18%;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}
.textBox:focus {
  box-shadow: none;
  box-shadow: inset 0 0 4px 0 #000;
  -moz-box-shadow: inset 0 0 4px 0 #000;
  -wevkit-box-shadow: inset 0 0 4px 0 #000;
}
.donation-button {
  width: 98%;
  margin: 1%;
  border: 0;
  background: grey;
  color: white;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  padding: 10px 0 10px 0;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For all Gecko based browsers */
  box-sizing: border-box;
}
.donation-button:hover {
  background: black;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="message">Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

  <input type="hidden" name="cmd" value="_donations">
  <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">

  <label class="donation">
    <input type="radio" name="amount" class="checkbutton" value="5,00"><span>€05.00</span>
  </label>
  <label class="donation">
    <input type="radio" name="amount" class="checkbutton" value="10,00"><span>€10.00</span>
  </label>
  <label class="donation">
    <input type="radio" name="amount" class="checkbutton" value="15,00"><span>€15.00</span>
  </label>
  <label class="donation">
    <input type="radio" name="amount" class="checkbutton" value="20,00"><span>€20.00</span>
  </label>
  <input type="number" class="textBox" name="amount" placeholder="€ Other">

  <input type="hidden" name="item_name" value="Donation">
  <input type="hidden" name="item_number" value="Donation">
  <input type="hidden" name="currency_code" value="EUR">
  <input type="hidden" name="lc" value="PT">
  <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
  <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


  <br style="clear: both;" />
  <input class="donation-button" type="submit" value="Send Donation">

</form>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

首先，不要相信点击是选择复选框的唯一方式。用户可以很好地选择自己的方式并将其更改为空格键。

其次，您想要的行为是单选按钮，而不是复选框。

我就是这样做的：

<强> HTML 

<p id="myTextIdentifier">Choose below the amount of your donation</p>
... <!- Hidden for brevity ->

<label><input type="radio" name="amount" data-message="Value is 5 message" value="5,00"><span>€05.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 10 message" value="10,00"><span>€10.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 15 message" value="15,00"><span>€15.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 20 message" value="20,00"><span>€20.00</span></label>
<input type="number" name="amount" data-message="Other value message" placeholder="€ Other">

<强>的JavaScript 

$('#otherValueIdentifier')
    .focus(function() {
        $(':radio').prop('checked', false);
    })
    .change(function() {
        changeText($(this).val().length
                     ? $(this).data('message')
                     : '');
    });

$(':radio').change(function() {
    changeText($(this).is(':checked')
                 ? $(this).data('message')
                 : '');
});

// Please keep in mind that this has a few flaws, I'll revise it later
$('[data-message]').hover(function () {
   // this is the mouseEnter function
   changeText($(this).data('message'));

}, function() {
   // this is the mouseLeave function
   changeText($('[data-message]:checked').data('message'));
});

function changeText(text) {
    $('#myTextIdentifier').val(text || 'Default message');
}
相关问题
最新问题