使用 jquery 更新 contentEditable 文本值，然后与联系表 7 集成

Question

我想知道如何通过选择 div 来更新聊天主题。我正在使用 Jquery。在处理完这个之后，我将把它集成到 wordpress 中的 contact form 7 插件中。我也想知道这是否可能。谢谢！

<div class="custom-contact-form">
        <div class="first-part"><strong class="hey">Hey there,</strong><br>
          <br>
          I am <span id="name" placeholder="Type something..." contenteditable="true" data-content="enter your name" class="contenteditable details">enter your name</span> and I would like<br>
          to <span id="action" class="contenteditable details chat-topic" style="cursor: pointer;">chat about a project</span>.
<div id="submit" class="submit submit-first-part">
      <div class="text">Next</div>
          </div>
        </div>

        <div class="second-part"><span id="question" contenteditable="true" data-content="Enter your message" class="contenteditable details">Enter your message</span><br><br>My email address is<br><span id="email" contenteditable="true" data-content="you@email.com" class="contenteditable details">you@email.com</span>
          <div id="send" class="submit submit-second-part">
            <div class="text">Send</div>
          </div>
          <div id="cancel" class="cancel">Cancel</div>
        </div>

        <div class="last-part">
          <div id="message"></div><br><br>
          <div id="return" class="cancel">Return</div>
        </div>

        <div class="overlay open">
          <div class="choices-wrapper">
            <div class="choices">
              <div class="line active">know more about us</div>
              <div class="line">chat about a project</div>
              <div class="line">ask about a job</div>
              <div class="line">say YO!</div>
            </div>
          </div>
        </div>
      </div>

这是 jquery

的脚本

$(document).ready(function() {
       $('.second-part').hide() 
  $('.last-part').hide()
  $('.overlay').hide() 
       
    $('.submit-first-part').click(function() {
     $('.first-part').hide();
     $('.second-part').fadeToggle(1000);
    });
    
    $('.submit-second-part').click(function() {
     $('.second-part').hide();
     $('.last-part').fadeToggle(1000);
    });
    
    $('.cancel').click(function() {
     $('.second-part').hide();
     $('.last-part').hide();
     $('.first-part').fadeToggle(1000);
    });
    
    $('.chat-topic').click(function() {
     $('.overlay').fadeToggle(1000);
    });
    
    
    //contenteditable
    $('.contenteditable').focus(function() {
     $(this).empty();
  });
    
 
});

Answer 1

如果我没有正确理解你的问题，你可以为带有 line class 的元素添加点击事件来完成这项工作，如下所示：

 $(".choices .line").click(function() {
    $("span.chat-topic").text($(this).text());

    // to remove active class from other items
    $(".choices .line").removeClass("active");

    // to add .active class to the new activated class
    $(this).addClass("active");

 });

查看 CODEPEN

中的工作示例

使用 jquery 更新 contentEditable 文本值，然后与联系表 7 集成

Update contentEditable text value using jquery then integrate with contact form 7

html

wordpress

jquery

contenteditable

contact-form