按鈕點擊更改類的活動和輸入值

我有兩個隱藏的輸入按鈕，我想要做的就是讓他們活躍onclick，當他們變得活躍，我想按鈕的背景色改變並添加類主動到按鈕，從0隱藏輸入值更改爲1，這裏是我迄今爲止嘗試：按鈕點擊更改類的活動和輸入值

$(".btn-default").click(function() { 
 
     $(this).css('background-color', 'blue'); 
 
     $(this).toggleClass("active"); 
 

 
    });

input{ 
 
display: none; 
 
} 
 

 
.btn-default{ 
 
background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-default">Button 1</button> 
 
    <input type="text" class="form-control" id="input1" value="0"> 
 

 
<button type="button" class="btn btn-default">Button 2</button> 
 
    <input type="text" class="form-control" id="input2" value="0">

來源

2017-05-31 stephjhonny

而是使用jQuery應用顏色的，你可以把它應用到你的活躍課程。然後使用.next().val()更新同級輸入的值。

$(".btn-default").click(function() { 
 
    $(this).addClass("active").next('.form-control').val('1'); 
 
});

input{ 
 
    display: none; 
 
} 
 
.btn-default{ 
 
    background: red 
 
} 
 
.active { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-default">Button 1</button> 
 
<input type="text" class="form-control" id="input1" value="0"> 
 

 
<button type="button" class="btn btn-default">Button 2</button> 
 
<input type="text" class="form-control" id="input2" value="0">

作爲一個側面說明，你可能可以使用<input type="hidden" value="0">而不是文本輸入。然後你不必用css手動隱藏它。

來源

2017-05-31 20:35:37

謝謝你，但它的好，保持活躍的背景顏色jQuery的，因爲我我的代碼中有其他活動類，我不希望它們混淆起來，好嗎？ – stephjhonny

是的，我只是根據最初的信息提出建議。你可以在開頭鏈接原始的'.css（）'，它的工作原理是一樣的。 –

如果你需要切換活動類和輸入值從0到1，您可以：

$(".btn-default").click(function() { 
 
    $(this).toggleClass("active").next(':input').val(function(idx, val) { 
 
     return (+val == 0) ? 1 : 0; 
 
    }); 
 
    console.log($(this).next(':input').val()); 
 
});

input{ 
 
    display: none !important; 
 
} 
 

 
.btn-default{ 
 
    background-color: red 
 
} 
 
.active { 
 
    background-color: blue !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" class="btn btn-default">Button 1</button> 
 
<input type="text" class="form-control" id="input1" value="0"> 
 

 
<button type="button" class="btn btn-default">Button 2</button> 
 
<input type="text" class="form-control" id="input2" value="0">

來源

2017-05-31 20:47:22 gaetanoM

按鈕點擊更改類的活動和輸入值

回答

相關問題