Java 单击后更改按钮样式

编辑：如果不清楚，请原谅，我需要一个瓦丁溶液

显然，这应该是非常直观的，但我不能设法使它工作，当一个按钮被点击时，我应该改变它的风格，如果再次点击，返回到原来的风格。我的猜测是：

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == my_special_button){            
        if(!b.getStyleName().contains("x")){
            b.addStyleName("x");                
        } else {
            b.removeStyleName("x");
        }       
    }
}

使用chrome inspector时，我看到添加了活动类，但按钮消失了。如果我点击按钮所在的位置，如果再次点击，我会看到活动类被删除和添加。。。仅当我在按钮所在区域外单击时，按钮才会重新出现

你能提供一些见解吗

编辑：我按照课堂上的建议更正了这里的示例代码。它已经按照建议更正了，但是我不知道它有什么不同，所以谢谢

页面加载时，按钮具有以下类别：

v-button v-button-thumbs-up-button thumbs-up-button

当我单击时，通过chrome inspector，我可以看到添加了活动的类：

v-button v-button-thumbs-up-button thumbs-up-button v-button-active active

如果我再次单击，它将被删除。显然，onclick代码是正确执行的

有两个问题：

活动样式未应用于按钮，按钮将消失！ 如果我在按钮外单击，按钮将重新显示，但样式将恢复为非活动样式。非活动样式工作正常，因此css由页面加载。 以下是我正在使用的css供进一步参考：

.thumbs-up-button{
background-image: url("../covercliptheme/img/thumbs_up_1x.png");
background-position: left top;  
}

.thumbs-up-button .v-button-active .active{ 
background-image: url("../covercliptheme/img/thumbs_up_1x_green.png");
background-position: left top;
}

我已经找到了样式化的解决方法：活动和聚焦。它正在发挥作用，但没有真正的理由证明它应该发挥作用。它应该像我最初想的那样工作。我认为，通过添加一个类，按钮将以该样式呈现，移除该类，样式将返回到原始样式

我认为问题在于我用组件构建页面的方式，而不是onClick操作本身。。我非常好奇到底出了什么问题：按钮是组件的一部分，组件也是其他组件的一部分，特别是带有按钮的组件由以下类表示：

public class CVRow extends CustomComponent implements Button.ClickListener{

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private HorizontalLayout horizontalLayout_1;
@AutoGenerated
private AbsoluteLayout absoluteLayout_2;
@AutoGenerated
private Button nativeButton_2;
@AutoGenerated
private Button nativeButton_1;

/**
 * The constructor 
 */
public CVRow() {
    buildMainLayout();
    setCompositionRoot(mainLayout);


    nativeButton_1.addListener(this);
    // TODO add user code here
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
    /* some layout code.. */

    // add horizontalLayout_1
    horizontalLayout_1 = buildHorizontalLayout_1();
    mainLayout.addComponent(horizontalLayout_1, "top:0.0px;left:0.0px;");

    return mainLayout;
}

@AutoGenerated
private HorizontalLayout buildHorizontalLayout_1() {
    // some layout code... //


    // add absoluteLayout_2 <-- buttons will be here
    absoluteLayout_2 = buildAbsoluteLayout_2();
    horizontalLayout_1.addComponent(absoluteLayout_2);

    return horizontalLayout_1;
}

@AutoGenerated
private AbsoluteLayout buildAbsoluteLayout_2() {
    // common part: create layout
    absoluteLayout_2 = new AbsoluteLayout();
    absoluteLayout_2.setImmediate(false);
    absoluteLayout_2.setWidth("60px");
    absoluteLayout_2.setHeight("60px");
    absoluteLayout_2.setMargin(false);

            //BUTTONS are here:
    // nativeButton_1
    nativeButton_1 = new Button();
    nativeButton_1.setImmediate(true);
    nativeButton_1.setWidth("20px");
    nativeButton_1.setHeight("20px");
    nativeButton_1.setStyleName("thumbs-up-button");
    absoluteLayout_2.addComponent(nativeButton_1, "top:41.0px;left:0.0px;");

    // nativeButton_2
    nativeButton_2 = new Button();
    nativeButton_2.setStyleName("thumbs-down-button");
    nativeButton_2.setImmediate(true);
    nativeButton_2.setWidth("20px");
    nativeButton_2.setHeight("20px");
    absoluteLayout_2.addComponent(nativeButton_2, "top:41.0px;left:40.0px;");

    return absoluteLayout_2;
}

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == nativeButton_1){

        if(nativeButton_1.getStyleName().contains("active"))
            nativeButton_1.removeStyleName("active");
        else
            nativeButton_1.addStyleName("active");
    }

            //etc...

}

}

---

使用纯javascript执行此操作的简单示例：

HTML:

JS:

---

代码中的问题是，检查并更改按钮b中的样式名，而不是按钮my_special_按钮中的样式名。它必须是这样的：

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == my_special_button){            
        if(!my_special_button.getStyleName().contains("x")){
            my_special_button.addStyleName("x");                
        } else {
            my_special_button.removeStyleName("x");
        }       
    }
}

---

您使用的是哪种瓦丁版本？您的代码在7.1.1版的my Vaadin应用程序中运行良好。是的，我使用的是6.8.12..arrr，别告诉我唯一的方法是迁移。不，它也适用于vaadin 6.x。我测试过了。我知道了，我试过了，但我看到的行为没有改变，类名被添加和删除，但就像浏览器没有加载新样式一样。我将编辑问题并更好地说明发生了什么，谢谢！

button{
    font-size:10px;
}

.active{
    font-size:15px;
}

var btn = document.getElementById('toggleButton');
btn.addEventListener('click', function(event){
    if(this.classList.contains('active')){
        this.classList.remove('active');
    }
    else{
        this.classList.add('active');
    }
});

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == my_special_button){            
        if(!my_special_button.getStyleName().contains("x")){
            my_special_button.addStyleName("x");                
        } else {
            my_special_button.removeStyleName("x");
        }       
    }
}