文章/答案/技术大牛

发布

社区首页 >问答首页 >使用.closest和.find获取要操作的值

问使用.closest和.find获取要操作的值
EN

Stack Overflow用户

提问于 2018-09-12 17:43:26

回答 1查看 48关注 0票数 1

您好，先谢谢您。

使用.closest和.find查找.cab输入字段的值是否正确？

我计划采用这些值，然后在.cdmyour DIV中显示适当的门大小。

是否有更好的方法来完成这个任务？这将是一行约20，所以我宁愿不使用ID来完成工作，因为我相信这将需要更多的必要代码。

$(document).ready(function() {
  $(".cab").keyup(function() {
    var parent = $(this).closest('.cdmrow');
    var width = parent.find(".cdmcolhalf:eq(0)").val();
    var height = parent.find(".cdmcolhalf:eq(1)").val();
    var dwidth = parent.find(".cdmcolhalf:eq(2)").val();
    var dheight = parent.find(".cdmcolhalf:eq(3)").val();
    console.log(width);
    console.log(height);
    console.log(dwidth);
    console.log(dheight);
  })
})

.cdmh1 {
  text-align: center;
}

.cdmrow {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.cdmcol {
  border-style: solid;
  border-width: 1px;
  width: 14.28%;
}

.cdmcol1 {
  width: 14.28%;
}

.cdmcolmeas {
  width: 57.14%;
}

.cdmyourord {
  width: 28.58%;
}

.cdmcolhalf {
  width: 7.142%;
  border-style: solid;
  border-width: .5px;
}

.cdmyour {
  background-color: lightgrey;
}

.cab {
  width: 50%;
  text-align: center;
  margin: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1 class="cdmh1">
    About Your Space | Cabinet Door Measurements
  </h1>
  <div class="cdmtable">
    <div class="cdmrow">
      <div class="cdmcol1">
      </div>
      <div class="cdmcolmeas">
        Your Cabinet's Measurements
      </div>
      <div class="cdmyourord cdmyour">
        Your Order
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol cdmyour">
        Single Doors
      </div>
      <div class="cdmcol cdmyour">
        Double Doors
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
        Opening Width (in)
      </div>
      <div class="cdmcol">
        Opening Height (in)
      </div>
      <div class="cdmcol">
        Reveal Between Double Doors (in)
      </div>
      <div class="cdmcol">
        Desired Overlay (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 1
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>

  </div>
</div>

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-12 17:51:51

关闭时，可以使用.text()将检索到的值附加到相关列。

较短版本:

$(document).ready(function() {
  $(".cab").on('input', function() {
    var parent = $(this).closest('.cdmrow');

    parent.find(".cab").each(function(i, v) {
      parent.find(".cdmcolhalf").eq(i).text($(this).val());
    });
  });
});

注意：您必须将选择器类从cdmcolhalf更改为cab，我建议使用input事件，因为它在跟踪用户输入时效率更高。

$(document).ready(function() {
  $(".cab").on('input', function() {
    var parent = $(this).closest('.cdmrow');

    var width = parent.find(".cab:eq(0)").val();
    var height = parent.find(".cab:eq(1)").val();
    var dwidth = parent.find(".cab:eq(2)").val();
    var dheight = parent.find(".cab:eq(3)").val();

    parent.find(".cdmcolhalf:eq(0)").text(width);
    parent.find(".cdmcolhalf:eq(1)").text(height);
    parent.find(".cdmcolhalf:eq(2)").text(dwidth);
    parent.find(".cdmcolhalf:eq(3)").text(dheight);
  })
})

.cdmh1 {
  text-align: center;
}

.cdmrow {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.cdmcol {
  border-style: solid;
  border-width: 1px;
  width: 14.28%;
}

.cdmcol1 {
  width: 14.28%;
}

.cdmcolmeas {
  width: 57.14%;
}

.cdmyourord {
  width: 28.58%;
}

.cdmcolhalf {
  width: 7.142%;
  border-style: solid;
  border-width: .5px;
}

.cdmyour {
  background-color: lightgrey;
}

.cab {
  width: 50%;
  text-align: center;
  margin: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1 class="cdmh1">
    About Your Space | Cabinet Door Measurements
  </h1>
  <div class="cdmtable">
    <div class="cdmrow">
      <div class="cdmcol1">
      </div>
      <div class="cdmcolmeas">
        Your Cabinet's Measurements
      </div>
      <div class="cdmyourord cdmyour">
        Your Order
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
      </div>
      <div class="cdmcol cdmyour">
        Single Doors
      </div>
      <div class="cdmcol cdmyour">
        Double Doors
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
      </div>
      <div class="cdmcol">
        Opening Width (in)
      </div>
      <div class="cdmcol">
        Opening Height (in)
      </div>
      <div class="cdmcol">
        Reveal Between Double Doors (in)
      </div>
      <div class="cdmcol">
        Desired Overlay (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Width (in)
      </div>
      <div class="cdmcolhalf cdmyour">
        Height (in)
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 1
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>
    <div class="cdmrow">
      <div class="cdmcol">
        Door 2
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcol">
        <input class="cab" type="text">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
      <div class="cdmcolhalf cdmyour">
      </div>
    </div>

  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52300799

复制

相似问题

问使用.closest和.find获取要操作的值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用.closest和.find获取要操作的值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用.closest和.find获取要操作的值
EN