那些遇到过的问题

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

Dav*_*ins 5 javascript css jquery

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

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

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

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

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

小提琴

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>
Run Code Online (Sandbox Code Playgroud)

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(""); 
    } 
});
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

小智 2

大卫！最后我改进了它:)\n您可以通过 data-alertOnHover（悬停在按钮或文本框上时显示）和 data-alertAfter（显示选择按钮或在文本框中键入数字）分别自定义 HTML 中的消息。它涵盖了所有状态并且不那么麻烦。

\n\n

还

\n\n
\n

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

\n
\n\n

\r\n
\r\n
var defaultTxt = $(\'#alert\').text();\r\nvar checked;\r\n$(\'input.checkbutton\').change(function() {\r\n  if ($(this).is(":checked")) {\r\n    $(".textBox").val("");\r\n  \t$(\'#alert\').text($(this).attr("data-alertAfter") + $(this).val());\r\n    checked = $(this);\r\n  }\r\n  else\r\n  {\r\n  \t$(\'#alert\').text(defaultTxt);\r\n    checked = undefined;\r\n  }\r\n  $(\'input.checkbutton\').not(this).prop(\'checked\', false);\r\n});\r\n$(\'.input-container\').hover(\r\n  function() {\r\n    $(\'#alert\').text($(this).children(\'input\').attr("data-alertOnHover"));\r\n  },\r\n  function() {\r\n    if (checked)\r\n    \t$(\'#alert\').text($(checked).attr("data-alertAfter") + $(checked).val());\r\n    else\r\n    \t$(\'#alert\').text(defaultTxt);\r\n  }\r\n);\r\n$(".textBox").focus(function() {\r\n  checked = undefined;\r\n\t$(".checkbutton").prop("checked", false)\r\n}).blur(function() {\r\n  if ($(this).val() != "") {\r\n  \tchecked = $(this);\r\n  \t$(\'#alert\').text($(this).attr("data-alertAfter") + $(this).val())\r\n  }\r\n});
Run Code Online (Sandbox Code Playgroud)\r\n
body {\r\n  box-sizing: border-box;\r\n  padding: 50px;\r\n  font-family: sans-serif;\r\n  font-size: 18px;\r\n  text-align: center;\r\n}\r\n\r\nlabel {\r\n  margin: 1%;\r\n  float: left;\r\n  background: #ccc;\r\n  text-align: center;\r\n  width: 18%;\r\n}\r\n\r\nlabel:hover {\r\n  background: grey;\r\n  color: #fff;\r\n}\r\n\r\nlabel span {\r\n  text-align: center;\r\n  box-sizing: border-box;\r\n  padding: 10px 0;\r\n  display: block;\r\n}\r\n\r\nlabel input {\r\n  display: none;\r\n  left: 0;\r\n  top: -10px;\r\n}\r\n\r\ninput:checked + span {\r\n  background-color: black;\r\n  color: #fff;\r\n}\r\n\r\n\r\n/* Hide HTML5 Up and Down arrows in input type="number" */\r\n\r\ninput[type=number] {\r\n  -moz-appearance: textfield;\r\n}\r\n\r\ninput[type=number]::-webkit-inner-spin-button,\r\ninput[type=number]::-webkit-outer-spin-button {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  margin: 0;\r\n}\r\n\r\n.textBox {\r\n  margin: 1%;\r\n  float: left;\r\n  background: #ccc;\r\n  border: 0;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n  font-family: sans-serif;\r\n  font-size: 18px;\r\n  width: 18%;\r\n  -webkit-box-sizing: border-box;\r\n  /* For legacy WebKit based browsers */\r\n  -moz-box-sizing: border-box;\r\n  /* For all Gecko based browsers */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.textBox:focus {\r\n  box-shadow: none;\r\n  box-shadow: inset 0 0 4px 0 #000;\r\n  -moz-box-shadow: inset 0 0 4px 0 #000;\r\n  -wevkit-box-shadow: inset 0 0 4px 0 #000;\r\n}\r\n\r\n.donation-button {\r\n  width: 98%;\r\n  margin: 1%;\r\n  border: 0;\r\n  background: grey;\r\n  color: white;\r\n  text-align: center;\r\n  font-family: sans-serif;\r\n  font-size: 18px;\r\n  padding: 10px 0 10px 0;\r\n  -webkit-box-sizing: border-box;\r\n  /* For legacy WebKit based browsers */\r\n  -moz-box-sizing: border-box;\r\n  /* For all Gecko based browsers */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.donation-button:hover {\r\n  background: black;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\r\n<p id="alert">Choose below the amount of your donation</p>\r\n\r\n<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">\r\n\r\n  <input type="hidden" name="cmd" value="_donations">\r\n  <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">\r\n\r\n  <label class="input-container">\r\n    <input type="checkbox" name="amount" class="checkbutton" value="5,00" data-alertOnHover="With \xe2\x82\xac5.00 we can accomplish this..." data-alertAfter="Your donation will be \xe2\x82\xac"><span>\xe2\x82\xac05.00</span></label>\r\n  <label class="input-container">\r\n    <input type="checkbox" name="amount" class="checkbutton" value="10,00" data-alertOnHover="With \xe2\x82\xac10.00 we could do that..." data-alertAfter="Your donation will be \xe2\x82\xac"><span>\xe2\x82\xac10.00</span></label>\r\n  <label class="input-container">\r\n    <input type="checkbox" name="amount" class="checkbutton" value="15,00" data-alertOnHover="With \xe2\x82\xac15.00 we could do that..." data-alertAfter="Your donation will be \xe2\x82\xac"><span>\xe2\x82\xac15.00</span></label>\r\n  <label class="input-container">\r\n    <input type="checkbox" name="amount" class="checkbutton" value="20,00" data-alertOnHover="With \xe2\x82\xac20,00 we could do more than that..." data-alertAfter="Your donation will be \xe2\x82\xac"><span>\xe2\x82\xac20.00</span></label>\r\n  <span class="input-container">\r\n    <input type="number" class="textBox" name="amount" placeholder="\xe2\x82\xac Other" data-alertOnHover="just type how much you want to donate..." data-alertAfter="Your donation will be \xe2\x82\xac">\r\n  </span>\r\n\r\n  <input type="hidden" name="item_name" value="Donation">\r\n  <input type="hidden" name="item_number" value="Donation">\r\n  <input type="hidden" name="currency_code" value="EUR">\r\n  <input type="hidden" name="lc" value="PT">\r\n  <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">\r\n  <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">\r\n\r\n\r\n  <br style="clear: both;" />\r\n  <input class="donation-button" type="submit" value="Send Donation">\r\n\r\n</form>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

124 次

最近记录：

8 年，11 月 前
相关归档
不寻常的textarea形状？ 272
如何在剃刀视图上引用.css文件？ 180
内联块列表项之间的空格 167
是否有一个css黑客的野生动物园只有不铬？ 158
jQuery如何获取元素的边距和填充？ 96
如何从数组中随机获取n个元素 66
JavaScript touchend与点击困境 44
如何推迟内联Javascript？ 44
从li和ul中去除黑点 35
单个元素上的多个js事件处理程序 26
难疑归档
如何在单个表达式中合并两个词典？ 4349
循环内的JavaScript闭包 - 简单实用的例子 2689
我应该使用Vagrant还是Docker来创建一个孤立的环境？ 2049
你如何改变用matplotlib绘制的数字的大小？ 1726
如何基于通配符匹配以递归方式查找当前和子文件夹中的所有文件？ 1695
C#的隐藏功能？ 1475
JavaScript中是否有常量？ 1118
Python中的null对象？ 1097
获取Android上的当前时间和日期 1058
如何旋转Android模拟器显示？ 1031