提醒開關Jquery

任何人都可以請幫我解決這個問題嗎？提醒開關Jquery

我想爲我的標籤創建一個警報切換器，但似乎我做錯了什麼。如果我添加到我的JS文件，我的添加按鈕將不再工作任何人都可以幫我嗎？

$(document).ready(function() { 
 

 
    $('.buttons').on('click', 'button.hide', function() { 
 
     console.log('hide'); 
 
     $('form').hide(); 
 
    }); 
 

 
    $('.buttons').on('click', 'button.add', function() { 
 
     console.log('add'); 
 
     var edit = $('#edit'); 
 
     editRow = $('#editRow'); 
 

 
     edit.show(); 
 
     if (!($('#addNew').length)) { 
 
      edit.append('<input type="button" id="addNew" onclick="addNewTr()" value="Add" name="submit" />'); 
 
     } 
 

 
     if (editRow) { 
 
      editRow.remove(); 
 
     } 
 

 
     for (var x = 1; x < $('input').length; x++) { 
 
      $('#btd' + x).val(''); 
 
     } 
 
    }); 
 

 
    $('#show').click(function() { 
 
     //$('form').show(); 
 
     //$('#btd1').val('Vlad'); 
 
     //$('#btd2').val('Andrei'); 
 
     //$('#btd3').val('vTask'); 
 
     // $('#btd4').val('Ceva'); 
 
     //$('#btd5').val('Alceva'); 
 
    }); 
 
}); 
 

 
function edit(a) { 
 
    var edit = $('#edit'); 
 
     addNew = $('#addNew'); 
 
     editRow = $('#editRow'); 
 

 
    edit.show(); 
 
    if (addNew) { 
 
     addNew.remove(); 
 
    } 
 

 
    if (editRow.length) { 
 
     editRow.replaceWith('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />'); 
 
    } else { 
 
     edit.append('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />'); 
 
    } 
 

 
    $.each($('.tr-' + a).find('td'), function (key, val) { 
 
     $('form#edit input[type=text]').eq(key).val($(val).text()); 
 
    }); 
 
} 
 

 
function save(a) { 
 
    var tr = $('tr'); 
 
    valid = true; 
 
    message = ''; 
 

 
    $('form#edit input, select').each(function() { 
 
     var $this = $(this); 
 

 
     if (!$this.val()) { 
 
      var inputName = $this.attr('name'); 
 
      valid = false; 
 
      message += 'Please complete all the colums' + inputName + '\n'; 
 
     } 
 
    }); 
 

 
    if (!valid) { 
 
     alert(message); 
 
    } else { 
 
     for (var q = 1; q < $('.tr-' + a + ' td').length; q++) { 
 
      $('.tr-' + a + ' td:nth-child(' + q + ')').html($('#btd' + q).val()); 
 
     } 
 
     for (var x = 1; x < $('input').length; x++) { 
 
      $('#btd' + x).val(''); 
 
     } 
 
     $('#editRow').remove(); 
 
    } 
 
} 
 

 
function addNewTr() { 
 
    var tr = $('tr'); 
 
    valid = true; 
 
    message = ''; 
 

 
    $('form#edit input, select').each(function() { 
 
     var $this = $(this); 
 

 
     if (!$this.val()) { 
 
      var inputName = $this.attr('name'); 
 
      valid = false; 
 
      message += 'Please enter your ' + inputName + '\n'; 
 
      /*switch (inputName) { 
 
    case 'Nume Proiect': 
 
      message += 'Message for password ' + inputName + '\n'; 
 
      break; 
 
    case 'Task Select': 
 
      message += 'Message for email ' + inputName + '\n'; 
 
      break; 
 
    case 'Volum': 
 
      message += 'Message for email ' + inputName + '\n'; 
 
      break; 
 
    case 'Unitati': 
 
      message += 'Message for email ' + inputName + '\n'; 
 
      break; 
 
    case 'Ore Lucrate': 
 
      message += 'Message for email ' + inputName + '\n'; 
 
      break; 
 

 
    }*/ 
 
     } 
 
    }); 
 

 
    if (!valid) { 
 
     alert(message); 
 
    } else { 
 
     $('table tbody').append('' + 
 
      '<tr class="tr-' + tr.length + '">' + 
 
      '<td>' + $('#btd1').val() + '</td>' + 
 
      '<td>' + $('#btd2').val() + '</td>' + 
 
      '<td>' + $('#btd3').val() + '</td>' + 
 
      '<td>' + $('#btd4').val() + '</td>' + 
 
      '<td>' + $('#btd5').val() + '</td>' + 
 
      '<td>' + $('#btd6').val() + '</td>' + 
 
      '<td class="buttons">' + 
 
      '<button class="removeThis" onclick="removeThis(' + tr.length + ')">Delete</button >' + 
 
      '<button class="edit" onclick="edit(' + tr.length + ')">Edit</button >' + 
 
      '</td >' + 
 
      '</tr>' + 
 
      ''); 
 
     for (var x = 1; x < $('input').length; x++) { 
 
      $('#btd' + x).val(''); 
 
     } 
 
    } 
 
} 
 

 
function removeThis(a) { 
 
    $('.tr-' + a).remove(); 
 
}

/* Center the loader */ 
 
#loader { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    z-index: 1; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: -75px 0 0 -75px; 
 
    border: 16px solid #e80041; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #188f84; 
 
    width: 120px; 
 
    height: 120px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    100% { -webkit-transform: rotate(360deg); } 
 
    0% { -webkit-transform: rotate(0deg); } 
 
} 
 

 
@keyframes spin { 
 
    100% { transform: rotate(360deg); } 
 
    0% { transform: rotate(0deg); } 
 
} 
 

 
/* Add animation to "page content" */ 
 
.animate-bottom { 
 
    position: relative; 
 
    -webkit-animation-name: animatebottom; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: animatebottom; 
 
    animation-duration: 1s 
 
} 
 

 
@-webkit-keyframes animatebottom { 
 
    from { bottom:-100px; opacity:0 } 
 
    to { bottom:0px; opacity:1 } 
 
} 
 

 
@keyframes animatebottom { 
 
    from{ bottom:-100px; opacity:0 } 
 
    to{ bottom:0; opacity:1 } 
 
} 
 

 
#myDiv { 
 
    display: none; 
 
    text-align: center; 
 
} 
 

 

 
/* Top Header */ 
 

 
#hh1 { 
 
color: #1b998b; 
 
text-align: center; 
 
font-size: 40px; 
 
border-bottom: 4px solid #FFFFFF; 
 
font-family: Sans-serif; 
 
height: 200px; 
 
    width: 1300px; 
 
position: fixed; 
 
    top: 20%; 
 
    left: 26.5%; 
 
    margin-top: -100px; 
 
    margin-left: -200px; 
 

 
} 
 

 
#vt1 { 
 
color: White; 
 
font-size: 40px; 
 
text-align: center; 
 
height: 200px; 
 
    width: 400px; 
 
position: fixed; 
 
    top: 35%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -200px; 
 

 
} 
 

 
/* BODY */ 
 

 
body { 
 
    font-family: serif; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 

 
table.greenTable { 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    border: 6px solid #152842; 
 
    background-color: #EEEEEE; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 
table.greenTable td, table.greenTable th { 
 
    border: 4px solid #1F6698; 
 
    padding: 3px 2px; 
 
} 
 
table.greenTable tbody td { 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
} 
 
table.greenTable tr:nth-child(even) { 
 
    background: #999DA5; 
 
} 
 
table.greenTable thead { 
 
    background: #93B5C1; 
 
    background: -moz-linear-gradient(top, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%); 
 
    background: -webkit-linear-gradient(top, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%); 
 
    background: linear-gradient(to bottom, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%); 
 
    border-bottom: 0px solid #444444; 
 
} 
 
table.greenTable thead th { 
 
    font-size: 19px; 
 
    font-weight: bold; 
 
    color: #F0F0F0; 
 
    text-align: center; 
 
    border-left: 2px solid #1B998B; 
 
} 
 
table.greenTable thead th:first-child { 
 
    border-left: none; 
 
} 
 

 
table.greenTable tfoot td { 
 
    font-size: 13px; 
 
} 
 
table.greenTable tfoot .links { 
 
    text-align: right; 
 
} 
 
table.greenTable tfoot .links a{ 
 
    display: inline-block; 
 
    background: #FFFFFF; 
 
    color: #000000; 
 
    padding: 2px 8px; 
 
    border-radius: 5px; 
 
} 
 

 

 
/* BUTTONS */ 
 

 
/* BODY */ 
 

 
button { 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: #000000 !important; 
 
    font-size: 14px; 
 
    padding: 2px 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    border: 2px solid #152842; 
 
    background: #63B8EE; 
 
    background: linear-gradient(top, #1F6698, #1B998B); 
 
    background: -ms-linear-gradient(top, #1F6698, #1B998B); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B)); 
 
    background: -moz-linear-gradient(top, #1F6698, #1B998B); 
 
} 
 
button:hover { 
 
    color: #14396A !important; 
 
    background: #468CCF; 
 
    background: linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -ms-linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1)); 
 
    background: -moz-linear-gradient(top, #93B5C1, #D1D1D1); 
 
} 
 

 
#addNew { 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: #000000 !important; 
 
    font-size: 14px; 
 
    padding: 1px 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    border: 2px solid #152842; 
 
    background: #63B8EE; 
 
    background: linear-gradient(top, #1F6698, #1B998B); 
 
    background: -ms-linear-gradient(top, #1F6698, #1B998B); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B)); 
 
    background: -moz-linear-gradient(top, #1F6698, #1B998B); 
 
} 
 
#addNew:hover { 
 
    color: #14396A !important; 
 
    background: #468CCF; 
 
    background: linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -ms-linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1)); 
 
    background: -moz-linear-gradient(top, #93B5C1, #D1D1D1); 
 
} 
 

 
#editRow { 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: #000000 !important; 
 
    font-size: 14px; 
 
    padding: 1px 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    border: 2px solid #152842; 
 
    background: #63B8EE; 
 
    background: linear-gradient(top, #1F6698, #1B998B); 
 
    background: -ms-linear-gradient(top, #1F6698, #1B998B); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B)); 
 
    background: -moz-linear-gradient(top, #1F6698, #1B998B); 
 
} 
 
#editRow:hover { 
 
    color: #14396A !important; 
 
    background: #468CCF; 
 
    background: linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -ms-linear-gradient(top, #93B5C1, #D1D1D1); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1)); 
 
    background: -moz-linear-gradient(top, #93B5C1, #D1D1D1); 
 
} 
 

 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.read-more { 
 
    background: #222; 
 
    padding: 10px 50px; 
 
    -webkit-box-shadow: 0 5px 6px #eee; 
 
\t -moz-box-shadow: 0 5px 6px #eee; 
 
\t box-shadow: 0 5px 6px #eee; 
 
} 
 
.read-more:before { 
 
    content: "<<"; 
 
    color: #fff; 
 
} 
 
#content { 
 
\t color: #222; 
 
\t text-align: center; 
 
\t max-width: 30%; 
 
\t margin: 200px auto 0; 
 
\t padding: 50px; 
 
\t border: 4px solid #222; 
 
} 
 
#preloader { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #222222; 
 
    z-index: 99999; 
 
    height: 100%; 
 
} 
 
#status { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 64px; 
 
    height: 64px; 
 
    margin: -32px 0 0 -32px; 
 
    padding: 0; 
 
} 
 

 

 
textarea { 
 
    width: 300px; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <link rel="stylesheet" href="../css/pontare.css"> 
 
</head> 
 
<body style="margin:0;"> 
 
    <table class="greenTable" id="myTable" width="80%"> 
 
    <tbody> 
 

 
    <tr><td colspan="7"><form id="edit" action="" method="post" hidden > 
 

 
<label for="btd1" ></label > 
 
    <input type="text" name="Nume Proiect" id="btd1" value="" placeholder="Nume Proiect *"> 
 

 
    <label for="btd2" ></label > 
 
<select type="text" name="Task Select" id="btd2" required> 
 
<option value="" disabled selected hidden>Task Select *</option> 
 
<option value="Librarie">Librarie</option> 
 
<option value="Delete">Delete</option> 
 
<option value="Marcaj">Marcaj</option> 
 
<option value="Mancare">Mancare</option> 
 
<option value="Suc">Suc</option> 
 
</select> 
 

 
<label for="btd3" ></label > 
 
<input type="number" name="Volum" id="btd3" value="" placeholder="Volum *"> 
 

 
    <label for="btd4" ></label > 
 
<select type="text" name="Unitati" id="btd4" required> 
 
<option value="" disabled selected hidden>Unitati *</option> 
 
<option value="ore">Ore</option> 
 
<option value="caractere">Caractere</option> 
 
<option value="imagini">Imagini</option> 
 
<option value="tabele">Tabele</option> 
 
<option value="fisiere">Fisiere</option> 
 
</select> 
 

 
    <label for="btd5" ></label > 
 
     <input type="number" name="Ore Lucrate" id="btd5" value="" placeholder="Ore Lucrate *"> 
 

 
<label for="btd6" ></label > 
 
<textarea id="btd6" name="comments" id="comments" style="font-family:sans-serif;font-size:1.2em;" placeholder="Comment"> 
 
</textarea> 
 
</form > 
 
</td> 
 
</tr> 
 
    <tr> 
 
    <td width="30%">Nume Proiect</td> 
 
<td width="10%">Task Select</td> 
 
    <td width="10%">Volum</td> 
 
    <td width="10%">Unitati</td> 
 
    <td width="10%">Ore Lucrate</td> 
 
    <td class="buttons" width="10%" colspan="2"><button class="add" >Add</button > 
 
    <button class="hide" >Hide</button > 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table > 
 
</body> 
 
</html>

我修改了代碼，所以我可以給你們一個完整的看到我的HTML/JS/CSS

的那麼，開關禁用嘗試刪除該消息並激活開關。完成該操作後添加按鈕將不會與開關工作了那是我的問題

來源

2017-10-04 Andrei Ref

您是作爲建議還缺少大括號爲你的if語句並關閉你的功能 – Matt

也嘗試過。沒有工作:( –

這不是答案，但只是另一件事在這裏錯了。 – Matt

你應該使用〜應變propely萬一

switch (inputName) { 
    case 'Nume Proiect': 
      message += 'Message for password ' + inputName + '\n'; 
      break; 
    case 'Task Select': 
      message += 'Message for email ' + inputName + '\n'; 
      break; 
    case 'Volum': 
      message += 'Message for email ' + inputName + '\n'; 
      break; 
    case 'Unitati': 
      message += 'Message for email ' + inputName + '\n'; 
      break; 
    case 'Ore Lucrate': 
      message += 'Message for email ' + inputName + '\n'; 
      break; 

    }

和資本的情況下引用過由馬特·

來源

2017-10-04 17:59:27 scaisEdge

我也試過，但它沒有做任何好的。 –

解釋更好...你有錯誤？...檢查瀏覽器控制檯錯誤，並讓我知道 – scaisEdge

大寫字母的開關和案件？ – Matt

提醒開關Jquery

回答

相關問題