Question

我尝试更新clicked元素中的文本，但div同时更新。尝试使用相同的代码而不包括Id或更远的类。

从早上开始尝试找到解决方案。

以下是游乐场的实用小提琴：https://jsfiddle.net/vinayak5192/63ujzwwn/2/

＆＃13;

$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
    var big_parent = $(this);

    //edit text
    if (big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val(big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

从所有函数体中定义big_parent，然后就完成了。

var big_parent
$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
      big_parent = $(this);

    //edit text
    if (big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val(big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

这里是snippet

Answer 2

您的问题是由$(".hover_edit_me").on('click', function(e) {内$("#sim-edit-text .sim-edit-box-buttons-save")定义big_parent的另一个点击处理程序引起的。 - 每次点击要编辑的元素时，你都会这样做，以便点击保存更新该元素，但它仍然会更新你点击过的其他元素。

有几种方法可以解决这个问题。一种方法是移动...-save的声明，并将.hover_edit_me的点击事件移至.off()点击事件之外。

另一种方法是在应用新元素之前删除保存元素上的事件，方法是添加$("#sim-edit-text .sim-edit-box-buttons-save").off().click(function() {，如下所示：

import java.io.Serializable; import java.nio.file.Paths; import java.util.ArrayList; import java.util.Arrays; import java.util.List; import lombok.Builder; import lombok.Data; import org.apache.hadoop.conf.Configuration; import org.apache.spark.SparkConf; import org.apache.spark.api.java.JavaRDD; import org.apache.spark.api.java.JavaSparkContext; import org.apache.spark.sql.Dataset; import org.apache.spark.sql.Row; import org.apache.spark.sql.RowFactory; import org.apache.spark.sql.SQLContext; import org.apache.spark.sql.SaveMode; import org.apache.spark.sql.types.DataTypes; import org.apache.spark.sql.types.Metadata; import org.apache.spark.sql.types.StructField; import org.apache.spark.sql.types.StructType; public class MainDriver { public static void main(String[] args) { SparkConf sparkConf = new SparkConf(); sparkConf.setAppName("Unit Test"); sparkConf.setMaster("local[2]"); JavaSparkContext javaSparkContext = new JavaSparkContext(sparkConf); SQLContext sqlCon = new SQLContext(javaSparkContext); final JavaRDD<Book> parallelize = javaSparkContext .parallelize(Arrays.asList(Book.builder().name("2341").test("34").build(), Book.builder().name("2341").test("34").build())); final JavaRDD<Row> map = parallelize.map(book -> RowFactory.create( book.getName(), book.getTest() )); List<StructField> fields = new ArrayList<>(); fields.add(new StructField("Name", DataTypes.StringType, true, Metadata.empty())); fields.add(new StructField("Test", DataTypes.StringType, true, Metadata.empty())); final StructType structType = DataTypes.createStructType(fields); final Dataset<Row> dataFrame = sqlCon.createDataFrame(map, structType); dataFrame .repartition(1) .write() .format("com.databricks.spark.xml") .mode(SaveMode.Overwrite) .option("rootTag", "n:Brands") .option("rowTag", "n:Brand") .save("new"); } } @Data @Builder class Book implements Serializable { private final String name; private final String test; }

Answer 3

检查以下代码段

您也可以通过以下方式解决。而不是每次都直接使用变量来声明变量 $ big_parent = $（this）;

＆＃13;

$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
    $big_parent = $(this);

    //edit text
    if ($big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val($big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        $big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

＆＃13;

Jquery更新所选div

3 个答案: