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

【问题标题】：Update contentEditable text value using jquery then integrate with contact form 7使用 jquery 更新 contentEditable 文本值，然后与联系表 7 集成
【发布时间】：2016-01-23 03:24:24
【问题描述】：

我想知道如何通过从选项 div 中进行选择来更新聊天主题。我正在使用 Jquery。在处理完这个之后，我将把它集成到 wordpress 中的联系表格 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();
		});
	   
	
});

【问题讨论】：

所以当用户从“line”类的元素中选择一个选项时，您想更新“chat-topic”类的元素吗？
是的，这就是我的目标
非常感谢您的回答 :) 真的很棒。我添加了 $('.overlay').fadeToggle(1000);所以一旦我选择了一个选项，叠加层就会隐藏
@zeropoint 是否可以将其创建为 php 联系表？谢谢
很遗憾我对 PHP 不熟悉。

标签： jquery html wordpress contenteditable contact-form

【解决方案1】：

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

 $(".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 中的工作示例

【讨论】：