如何读取不同的 CSS 类与 jquery 相同的开头？

Question

我在页面上有这样的结构：

<div class="sapUiVltCell sapuiVltCell">

    <div class="row">
        <div class="skip-undefined col-1">
            <span id="__button0" class="Handler1 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
                <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"></input>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>
        </div>
        <div class="skip-undefined col-2"> . </div>
        <div class="skip-1 col-2">
            <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false" role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4"></input>
        </div>
    </div>

</div>

会发生什么（理论上，没有把所有代码放在这里，因为它是 SAPUI5）是，我点击一个单选按钮，我希望我的文本字段被启用，其他的再次被禁用（如果一个是已经启用），到目前为止，我的代码结构如下：

function selectHandler2() {
    $(".Handler2").prop("disabled", false);
    $(".Handler2.sapUiTfDsbl").css({"background-color":"rgb(255, 255, 255)",
                                    "border":"1px solid rgb(191, 191, 191)",
                                    "color":"rgb(191, 191, 191)"});
    $(".Handler1, .Handler3, .Handler4, .Handler5, .Handler6, .Handler7").prop("disabled", true);
    $(".Handler1.sapUiTfDsbl, .Handler3.sapUiTfDsbl, .Handler4.sapUiTfDsbl, .Handler5.sapUiTfDsbl, .Handler6.sapUiTfDsbl, .Handler7.sapUiTfDsbl").css({"background-color":"rgb(251, 251, 251)",
                                    "border":"1px solid rgb(219, 219, 219)"});
};

类由 SAPUI5 生成。我为 7 个不同的 RadioButtons 做了每一个，激活了 7 个不同的文本字段。

但现在我只想将它自动化为一个函数 selectHandler() 而不是 7 个。

任何想法都会很棒。

Answer 1

您可以使用 jQuery 中的 starts with selector：

$("input[class^='handler']").click(function(){
    ...
});

或者，您可以使用 .each() 遍历所有无线电输入字段，并将事件处理程序相应地绑定到 class:

// Loop over all radio buttons
$("input[type=radio]").each(function(){

    // Check if class starts with "handler"
    if( this.className.substr(0, 7) == "handler" ){

        // Bind event
        $(this).click(function(){
            ...
        });
    };

});

Answer 2

您可以通过收音机上的点击侦听器并使用下一个功能来执行此操作：

$('.row input[type="radio"]').on('click', function() {
    $('.row input[type="text"]').prop('disabled', true); //disable all text input
    $('.row input[type="radio"]').not(this).prop('checked', false); //uncheck other radio
    $(this).next('.row input[type="text"]').prop('disabled', false); //enable the current input
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div>
    <input class="handler1" type="radio"/>
    <input class="handler1" type="text" disabled="disabled"/>
  </div>
</div>
<div class="row">
  <div>
    <input class="handler2" type="radio"/>
    <input class="handler2" type="text" disabled="disabled"/>
  </div>
</div>
<div class="row">
  <div>
    <input class="handler3" type="radio"/>
    <input class="handler3" type="text" disabled="disabled"/>
  </div>
</div>

编辑：在单独的 div 中输入

function ActivateInput(el) {
  $('.row input[role="textbox"]').prop('disabled', true); //disable all text input
  $(el).parent().parent().parent().find('input[role="textbox"]').prop('disabled', false); //enable the current input
}

$('.row input[type="radio"]').on('click', function() {
  ActivateInput(this);
});

ActivateInput($('.row input[type="radio"]:checked'));

.row div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sapUiVltCell sapuiVltCell">
  <div class="row">
    <div class="skip-undefined col-1"> <span id="__button0" class="Handler1 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
            <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"/>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>

    </div>
    <div class="skip-undefined col-2">.</div>
    <div class="skip-1 col-2">
      <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false"
      role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4" />
    </div>
  </div>
  <div class="row">
    <div class="skip-undefined col-1"> <span id="__button0" class="Handler2 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
            <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"/>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>
    </div>
    <div class="skip-undefined col-2">.</div>
    <div class="skip-1 col-2">
      <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false"
      role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4" />
    </div>
  </div>
</div>

Answer 3

收听收音机的变化，获取选中的收音机的 id，禁用所有字段（在 id 之间循环），启用具有相同 id 的字段：

var tot_handlers = 7;

// Disable all but the $'(.Handler' + id) one
function enableHandler(id) {
    // disable all fields
    for (n = 1; n <= tot_handlers; n++) {
        $('input.handler' + n + '[type=text]').prop("disabled", true).css({
            "background-color": "rgb(251, 251, 251)",
            "border": "1px solid rgb(219, 219, 219)"
        });
    }
    // enable the good field
    $('input.handler' + id + '[type=text]').prop("disabled", false).css({
        "background-color": "rgb(255, 255, 255)",
            "border": "1px solid rgb(191, 191, 191)",
            "color": "rgb(191, 191, 191)"
    });
}

// Suggestion to get id id of the checked field
$('input[type=radio][class^=handler]').on('change', function(){
    var $checkedradio = $(this), id;
   for (n = 1; n <= tot_handlers; n++) { 
       if($checkedradio.is('.handler' + n)) { id = n; break; }
   }
   enableHandler(id);
});

演示：https://jsfiddle.net/ufwkehtz/2/

Answer 4

已更新，这个如何响应单选按钮点击 class 名称以 'handler':

$(document).on("click", "input[class^='handler'][type='radio']", function () {
    $rb = $(this);
    var inputSelector = $rb.attr("class");
    inputSelector = "input[class='"+inputSelector+"'][type='text']";
    $input = $(inputSelector);
    if ($rb.checked == false) {
      
        $input.attr("disabled", true);
        $("input[class^='handler'][type='text']").not($input).attr("disabled", false);
        
    } else {
  
        $input.attr("disabled", false);
        $("input[class^='handler'][type='text']").not($input).attr("disabled", true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
    <div>
        <input class="handler1" type="radio" name="handler" checked></input>
        <input class="handler1" type="text" value="radio 1 input text"></input>
    </div>
</div>
<div class="row">
    <div>
        <input class="handler2" type="radio" name="handler"></input>
    
    </div>
</div>
<div class="row">
    <div>
        <input class="handler3" type="radio" name="handler"></input>
        <input class="handler3" type="text" disabled="disabled" value="radio 3 input text"></input>
    </div>
</div>
<br>
    <input class="handler2" type="text" disabled="disabled" value="radio 2 input text"></input>

如何读取不同的 CSS 类与 jquery 相同的开头？

How to read different CSS classes with the same beginning with jquery?

css

jquery

sapui5

编辑：在单独的 div 中输入

如何读取不同的 CSS 类 与 jquery 相同的开头？

How to read different CSS classes with the same beginning with jquery?

css

jquery

sapui5

编辑：在单独的 div 中输入

如何读取不同的 CSS 类与 jquery 相同的开头？