Question

我有html代码

<div id="left-container" class="w3-container w3-left">
    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
        <h1>Give</h1>
        <h3>Selected Definition:</h3>
        <ul style="display:none;">
            <li> offer in good faith </li>
            <li> inflict as a punishment </li>
            <li> afford access to </li> 

        </ul>
    </div>

    <div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
        <h1>Up</h1>
        <h3>Selected Definition:</h3>

        <ul style="display:none;">
            <li> to a higher intensity </li>
            <li> to a later time </li>
            <li> used up </li>

        </ul>
    </div>

</div>

<div id="right-container" class="w3-container w3-right"></div>

我希望用户一旦点击其中一个wordDiv，就能够在右侧容器中看到该单词的潜在定义（可在每个“wordDiv”的“ul”元素中找到），选择其中一个定义，然后我想在左容器中的原始wordDiv中显示所选定义。

您可以找到Jsfiddle Demo Here

Answer 1

请检查此fiddle

我已根据您选择的div将li元素添加到另一个div。

Answer 2

使用jQuery的解决方案。 Updated Fiddle

$config = Array(
    'protocol' => 'sendmail',
    'mailtype' => 'html',
    'smtp_host' => '', //your SMTP host
    'smtp_port' => 26,
    'smtp_user' => '', //your SMTP email address
    'smtp_pass' => '', //your SMTP email password
    'charset' => 'iso-8859-1',
    'wordwrap' => TRUE
);
$this->load->library('email', $config);
$this->email->set_newline("\r\n");
$this->email->set_header('MIME-Version', '1.0; charset=utf-8'); //must add this line
$this->email->set_header('Content-type', 'text/html'); //must add this line

$this->email->from('', ''); //from/sender email [with name (optional)]
$this->email->to(); //to/receiver email

$this->email->subject(''); //email subject
$message = $this->load->view('...directory.../...filename...',$data,TRUE); //html template/body with dynamic data
$this->email->message($message);
$this->email->send();

Answer 3

你可以在click函数中使用jQuery这个变量，这是你的请求的一个有效jQuery示例Updated Fiddle

它将li元素放在右边的div中并添加onclick监听器，它具有其原点的知识;）

＆＃13;

$('h1').click(function(){
var origin=$(this);
	$(this).siblings('ul').children().click(function(){
		$(this).parent().hide();
		$(origin).parent().append(this);
  	    $(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
  
  $(this).siblings('ul').show();
  $("#right-container").append($(this).siblings('ul'));
  
})

$('ldi').click(function(){
	$(this).parent().hide();
	$(this).parent().parent().append(this);
  $(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})

＆＃13;

在引用原始父元素的同时将子元素附加到另一个div

3 个答案: