jQuery - 邊框顏色的一種功能，但在不同的側面

您好我想在jQuery領域尋求幫助。所以我有這個項目在jsfiddle中發佈如下。你可以看到我有一個帶有邊框的段落。有按鈕可以改變邊界的一側。頂部，右側，底部和左側有一個按鈕。jQuery - 邊框顏色的一種功能，但在不同的側面

我只發佈其中兩個，因爲我讓他們都工作，但有很多代碼。對於每個按鈕我使用不同的功能。在示例中是否可能使用一個函數。他們有相同的類名，我認爲data *屬性可能會在這裏派上用場，但我不知道該怎麼做。

也許有一種方法可以寫下一個函數來獲取data *屬性的值，然後出現每個按鈕的結果。

請如果您有任何想法發佈它，我會嘗試它，看看它是否工作。我需要一個功能，對於每一方都沒有不同。提前致謝。

$(document).ready(function() { 
 
    $('#leftBordColor').change(function() { 
 
     $('p').css("border-left-color", $('#leftBordColor').val()); 
 
    }); 
 
    $('#bottomBordColor').change(function() { 
 
     $('p').css("border-bottom-color", $('#bottomBordColor').val()); 
 
    }); 
 
});

p { 
 
    border: 5px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table> 
 
     <tr> 
 
      <td>Долна</td> 
 
      <td colspan="2"> 
 
       <input type="color" name="border_color" value="#ffffff" id="bottomBordColor" class="BordColor" data-border-color="border-bottom-color" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Лява</td> 
 
      <td colspan="2"> 
 
       <input type="color" name="border_color" value="#ffffff" id="leftBordColor" class="BordColor" data-border-color="border-left-color" /> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <br /> 
 
    <p> This is only for the example. But the result will be enough for my project too</p> 
 
</body>

來源

2016-11-25 Marin Atanasov

你可以試試'$（ '＃leftBordColor，＃bottomBordColor'）變化（函數（）{ （'p'）.css（this.dataSet.borderColor，$（this）.val（））; }）;' – Satpal

您可以隨時使用data attributes對於這樣的任務，你需要從HTML元素的一些信息傳遞給一個共同的功能。我曾嘗試下面來實現它。

$(document).ready(function() { 
 
    $(".BordColor").on("change", function(){ 
 
    var side = $(this).data("border-side"); 
 
    var property_name = "border-"+side+"-color"; 
 
    var color = $(this).val(); 
 
    $('p').css(property_name, color); 
 
    });//.BordColor change 
 
});

p { 
 
    border: 5px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table> 
 
    <tr> 
 
     <td>Долна</td> 
 
     <td colspan="2"> 
 
     <input type="color" data-border-side="bottom" name="border_color" value="#ffffff" id="bottomBordColor" class="BordColor" data-border-color="border-bottom-color" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Лява</td> 
 
     <td colspan="2"> 
 
     <input type="color" data-border-side="left" name="border_color" value="#ffffff" id="leftBordColor" class="BordColor" data-border-color="border-left-color" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <br /> 
 
    <p> This is only for the example. But the result will be enough for my project too</p> 
 

 

 
</body>

來源

2016-11-25 12:46:02

感謝隊友也爲我提供了很多幫助。 –

$(document).ready(function() { 
 
    $(document).on('change', 'input[name=border_color]', function() { 
 
     var border = $(this).data('border-color'); 
 
     $('p').css(border, $(this).val()); 
 
    }); 
 
});

p { 
 
    border: 5px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table> 
 
    <tr> 
 
     <td>Долна</td> 
 
     <td colspan="2"> 
 
     <input type="color" name="border_color" value="#ffffff" id="bottomBordColor" class="BordColor" data-border-color="border-bottom-color" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Лява</td> 
 
     <td colspan="2"> 
 
     <input type="color" name="border_color" value="#ffffff" id="leftBordColor" class="BordColor" data-border-color="border-left-color" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <br /> 
 
    <p> This is only for the example. But the result will be enough for my project too</p> 
 

 

 
</body>

來源

2016-11-25 12:46:18

謝謝。其他物業也幫了我很大忙。很高興看到有人願意幫助你。再次感謝你。 –

歡迎您:) –

jQuery - 邊框顏色的一種功能，但在不同的側面

回答

相關問題