Question

我有一堆select2元素，我的函数public static String getUrlResponse(String url) throws IOException { URL obj = new URL(url); HttpURLConnection con = (HttpURLConnection) obj.openConnection(); // optional default is GET con.setRequestMethod("GET"); //add request header int responseCode = con.getResponseCode(); System.out.println("\nSending 'GET' request to URL : " + url); System.out.println("Response Code : " + responseCode); BufferedReader in = new BufferedReader( new InputStreamReader(con.getInputStream())); String inputLine; StringBuffer response = new StringBuffer(); while ((inputLine = in.readLine()) != null) { response.append(inputLine); } in.close(); //print in String return response.toString(); }用于在select2打开和关闭时隐藏键盘。

hideSelect2Keyboard()

工作正常；但是，此功能将所有选择元素作为一个整体作为目标，这使我感到麻烦，因为某些元素具有自己的事件处理程序/* Hide keyboard on select2 open event */ function hideSelect2Keyboard(){ $('.select2-search input, :focus,input').prop('focus',false).blur(); } $("select").select2().on("select2-open", hideSelect2Keyboard); $("select").select2().on("select2-close",function(){ setTimeout(hideSelect2Keyboard, 50); });和onchange，它们会无意中触发。

因此，我只想将函数onblur定位为选择要单击的元素。

hideSelect2Keyboard

// hide keyboard after select value and drop down list open
function hideSelect2Keyboard(ID){
    $('#'+ID+' .select2-search input, #'+ID+' :focus, #'+ID+' input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard(this.id));

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard(this.id), 50);
});

$("#Gender").select2().on('select2-blur', function() {
  alert('gender selected');
});

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard() {
  $('.select2-search input, :focus,input').prop('focus', false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close", function() {
  setTimeout(hideSelect2Keyboard, 50);
});

然后，它不再起作用，并且在控制台中也没有错误。出了什么问题，如何定位特定的单击元素并应用功能<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script> <label for="Salutation">Salutation:</label> <select class="" name="" id="Salutation"> <option value="Mrs">Mrs</option> <option value="Mr">Mr</option> <option value="Miss">Miss</option> </select> <label for="Gender">Gender:</label> <select class="" name="" id="Gender"> <option value="Female">Female</option> <option value="Male">Male</option> <option value="Transgender">Transgender</option> </select>起作用？谢谢。

Answer 1

$("#Gender").select2().on('select2-blur', function() {
 // alert('gender selected');
});

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(selectorId) {
  var ID = '#'+selectorId;
  alert(ID);
  $(ID+' .select2-search input,'+ID+' :focus,'+ID+' input').prop('focus',false).blur();
 
}

$("select").select2().on("select2-open", function(){
// here you can think whether you pass id or not;
//var selectId = $(this).attr('id');
hideSelect2Keyboard('passnoid');
});

$("select").select2().on("select2-close", function() {
    var selectId = $(this).attr('id');
    hideSelect2Keyboard(selectId);
    var selectedItem =  $(this).find(':selected').val();
    if(selectedItem =="Miss"){
        alert("Do something");
    }
  setTimeout(hideSelect2Keyboard, 50);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
  <option value="Mrs">Mrs</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
  <option value="Female">Female</option>
  <option value="Male">Male</option>
  <option value="Transgender">Transgender</option>
</select>

Answer 2

如果要在给定类下定位特定元素，可以尝试这样做：

$(window).ready(()=>{
  
  function alertId(){
     $(this).toggleClass('clicked');
     console.log(`${$(this).attr('id')} was clicked`);
  }
  
  $('.container-content').on('click', (e)=>{
    if(!$(e.target).hasClass('container-content')){
      $(e.target).one('click', alertId);
    }
  });
});

.container-content {
  height: 30vh;
  background-color: blue;
  margin: 20px;
  transition: background-color 300ms ease-in-out;
}

.clicked {
  background-color: red;
}

.inner-content {
  border: thin solid white;
  height: 40px;
  transition: background-color 300ms ease-in-out;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div class="container">
  <div class="container-content" id="content-1">
    <div class="inner-content" id="inner-1"></div>
  </div>
  <div class="container-content" id="content-2">
  </div>
  <div class="container-content" id="content-3">
  </div>
</div>

运行此命令时，您会看到第一次单击给定的div时，不会发生任何事情（因为click事件绑定到元素之后，因此将其单击）。但是，一旦再次单击它，它将变成红色，并将其ID记录到控制台。

另外，这是working example：）

如何针对选择元素并应用自定义功能？

2 个答案: