Scott Marcus的社区主页

Scott Marcus 最近回复了

5 年前

回复了 Scott Marcus 创建的主题 » 如何在jQuery中获取DOM元素

只是不要包装 this 在JQuery中。

jQuery($ => {
  $('td').on('click', function() {
console.log(this);
})
});

td {
padding:5px;
border:solid black 1px;}

table{
border-collapse:collapse;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

6 年前

回复了 Scott Marcus 创建的主题 » 使用JQuery选择给定父元素的子元素

虽然我将展示一个JQuery解决方案,但这是一件非常简单的事情,以至于JQuery真的有点过头了。

$("ul.list:first-of-type > li:first-of-type").addClass("active");

.active { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul class="list">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul class="list">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul class="list">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

5 年前

回复了 Scott Marcus 创建的主题 » 使用不带jquery的javascript从多个不同的选定下拉列表项中获取值

有几种方法可以做到这一点,但一种方法是将值存储在函数之外,以便它们可以在其他函数中使用。

有关代码的其他修改,请参见内联注释:

<!DOCTYPE html>
<html>
<body>

<select id ="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

  <select id ="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<script>
  // Set up your variables outside of each function so that you can use them outside of the functions
  var selectCars1 = document.getElementById("cars1");
  var selectCars2 = document.getElementById("cars2");
  var cars1Value = "";
  var cars2Value = "";  
  
  // Don't use .onXys properties. Use .addEventListener
  selectCars1.addEventListener("change", getValues);
  selectCars2.addEventListener("change", getValues);  
  
  function getValues(){
     cars1Value = selectCars1.value; // Just get the value, no need to pass index
     cars2Value = selectCars2.value; // Just get the value, no need to pass index     
     
     doOtherWork();
  }
  
  function doOtherWork(){
    alert(cars1Value + " " + cars2Value);  
  }
 
</script>
</body>
</html>

另一种避免在更高范围内设置变量的方法是将值直接传递给希望使用它们的另一个函数:

<!DOCTYPE html>
<html>
<body>

<select id ="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

  <select id ="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<script>
  // Set up your variables outside of each function so that you can use them outside of the functions
  var selectCars1 = document.getElementById("cars1");
  var selectCars2 = document.getElementById("cars2");
  
  // Don't use .onXys properties. Use .addEventListener
  selectCars1.addEventListener("change", getValues);
  selectCars2.addEventListener("change", getValues);  
  
  function getValues(){
     // Do whatever here, but when done, pass both values to other function:   
     doOtherWork(selectCars1.value, selectCars2.value);
  }
  
  function doOtherWork(val1, val2){
    alert(val1 + " " + val2);  
  }
 
</script>
</body>
</html>

6 年前

回复了 Scott Marcus 创建的主题 » jquery/javascript我的函数在按下按钮时没有运行

首先,您是否检查了开发人员的控制台(F12)以查看是否有任何错误。是否确实引用了jquery库。

接下来,即使引用了jquery, .closest() 将搜索调用它的元素的祖先元素。如果您的按钮不是您希望查找的元素的后代,则不会找到它。

现在,假设 关闭() 找到你的行,你就要求 .text() 在整行。这可能是您想要的,但似乎更可能是您想要一个单元一个单元的数据。

另外,你的按钮是 submit 用于提交表单数据的按钮,但似乎您在这里所做的不是这个。如果是这样,使用常规按钮。

而且,您的HTML无效,因为您的手机有一个错误的结束标记。

所以,纠正所有这些:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='rowdata'>
     <td>Bob</td>
     <td>Smith</td>
     <td><input type='button' class='getRow' value='ClickMe'></td>
</tr>
</table>

<script>
    $(".getRow").click(function() {
       var rowOfData = $(this).closest(".rowdata");
       alert(rowOfData.text()); // Gets all the text in the row
       alert($("td:first-child", rowOfData).text()); // Gets just first cell
    });
</script>

» Scott Marcus 创建的更多回复