Question

您好我想在jQuery字段中寻求帮助。所以我在jsfiddle下面发布了这个项目。你可以看到我有一个带边框的段落。有些按钮可以改变边框的一侧。顶部，右侧，底部和左侧都有一个按钮。

我只发布了其中两个因为我让它们全部工作但是有很多代码。对于每个按钮，我使用不同的功能。在示例中是否可能使用一个函数。它们具有相同的类名，我认为数据*属性可能在这里派上用场，但我不知道该怎么做。

也许有办法写下一个获取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>

Answer 1

您始终可以使用data attributes执行此类任务，您需要将某些信息从html元素传递到公共函数。我试图在下面实现它：

＆＃13;

$(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
});

＆＃13;

p {
  border: 5px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

p {
  border: 5px solid black;
}

＆＃13;

<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>

＆＃13;

jQuery - 边框颜色的一个功能，但在不同的侧面

2 个答案: