1

我想要三个(或更多)普通按钮,我将在三张图片下方使用,只有一个会有“默认”文本,其他按钮会有“设置为默认”文本。

<input type="button" id="button1" value="Default" > 

<input type="button"id="button2"  value="Set as default" > 

<input type="button" id="button3"  value="Set as default" >  

单击“设置为默认值”时,此按钮的文本应更改为默认值,颜色也应更改..(以前的默认按钮现在将“设置为默认值”)

  1. 我如何将 jquery 用于两个以上的按钮?
  2. 当我将此发布到 php 时,我怎么知道哪个是默认值?
  3. 如果您有任何其他建议/代码示例而不是按钮来选择默认图片,他们非常欢迎
4

3 回答 3

4
$('input[type="button"]').on('click', function() {
  $('input[type="button"]').val('Set as default');
  $(this).val('Default');
});

PHP 将通过给它们命名来知道: (button1, 2, 3) - 值将是“默认”

<input type="button" id="button1" name="button1" value="Default" > 

<input type="button"id="button2"  name="button2"  value="Set as default" > 

<input type="button" id="button3"  name="button3"  value="Set as default" > 
于 2013-01-17T17:02:38.323 回答
1

1)您可以将选择器与逗号组合。

$("#button1, #button2, #button3").on("click", function(){
  $("#button1, #button2, #button3").val("Set as default");
  $(this).val("Default");
});

2)您可以添加一个隐藏输入来捕获您需要的任何内容(<input type='hidden' id='selectedbutton'>)。

$("#button1, #button2, #button3").on("click", function(){
  $("#button1, #button2, #button3").val("Set as default");
  $(this).val("Default");
  $("#selectedbutton").val($(this).attr("id"));
});

3) 单选按钮是一个不错的选择,因为它们强制只选择一个,并且还可以通知您的服务器。您仍然需要手动更改文本(除非您想使用 CSS)。

ETA:你提到想要控制颜色,也许还有其他风格。我建议您更好地利用类进行格式化和选择:

HTML

<input type="button" id="button1" class='btn-set-default btn-is-default' value="Default" > 
<input type="button"id="button2" class='btn-set-default' value="Set as default" >    
<input type="button" id="button3" class='btn-set-default' value="Set as default" >  

查询:

$(".btn-set-default").on("click", function(){
  $(".btn-set-default").removeClass("btn-is-default").val("Set as default");
  $(this).addClass("btn-is-default").val("Default");
  $("#selectedbutton").val($(this).attr("id"));
});

CSS

.btn-set-default { }
.btn-is-default { color:red; }
于 2013-01-17T17:05:01.343 回答
1

尝试-

$(function(){
    $(":button").click(function(){
      $(":button").prop('value','Set as default');
        $(this).prop('value', 'Default'); 
    });
});

http://jsfiddle.net/KDkqL/

以“默认”值发布的那个是被点击的那个。

于 2013-01-17T17:05:28.613 回答