Question

<script>

$(document).ready(function(){
    $("#firstImg").click(function(){
        $('<p>Shankar Dayal Sharma was the ninth President of India</p>').appendTo('#content');
        $('#content').show();
    });
    $("#secondImg").click(function(){
        $('<p>.Kocheril Raman Narayanan was the tenth President of India.<p>').appendTo('#content');
        $('#content').show();
    });
    $("#thirdImg").click(function(){
        $('<p>.Avul Pakir Jainulabdeen "A. P. J." Abdul Kalam  was the 11th President of India from 2002 to 2007.</p>').appendTo('#content');
        $('#content').show();
    });
    $("#fourthImg").click(function(){
        $('<p>Pratibha Devisingh Patil is an Indian politician who served as the 12th President of India from 2007 to 2012.</p>').appendTo('#content');
        $('#content').show();
    });
    $("#fifthImg").click(function(){
        $('<p>.Pranab Kumar Mukherjee  is the 13th and current President of India.</p>').appendTo('#content');
        $('#content').show();
    });
});
</script>

<style>

#contentBox{
    width:50%;
    height:50%;
    border:2px solid black;
    margin-top:10%;
}
</style>

嗨我想尝试动态添加内容到div ..我的代码已经添加了5个图像..如果我点击第一个图像相关文本应该在内容类中显示..与所有图像相同。我为此写了代码......但是数据没有附加到div ..是否有任何错误？

Answer 1

每次单击img时，您都需要删除以前添加的内容。请检查以下答案。

您也可以使用此脚本。用旧的替换它。

$(document).ready(function(){
    $("#firstImg").click(function(){
      $('.content').html('<p>Shankar Dayal Sharma was the ninth President of India</p>');
    });
    $("#secondImg").click(function(){
      $('.content').html('<p>.Kocheril Raman Narayanan was the tenth President of India.<p>');
    });
    $("#thirdImg").click(function(){
        $('.content').html('<p>.Avul Pakir Jainulabdeen "A. P. J." Abdul Kalam  was the 11th President of India from 2002 to 2007.</p>');
    });
    $("#fourthImg").click(function(){
      $('.content').html('<p>Pratibha Devisingh Patil is an Indian politician who served as the 12th President of India from 2007 to 2012.</p>');
    });
    $("#fifthImg").click(function(){
      $('.content').html('<p>.Pranab Kumar Mukherjee  is the 13th and current President of India.</p>');
    });
});

或

$(document).ready(function(){
    $("#firstImg").click(function(){
      $('.content').html('<p>Shankar Dayal Sharma was the ninth President of India</p>');
    });
    $("#secondImg").click(function(){
      $('.content').html('<p>.Kocheril Raman Narayanan was the tenth President of India.<p>');
    });
    $("#thirdImg").click(function(){
        $('.content').html('<p>.Avul Pakir Jainulabdeen "A. P. J." Abdul Kalam  was the 11th President of India from 2002 to 2007.</p>');
    });
    $("#fourthImg").click(function(){
      $('.content').html('<p>Pratibha Devisingh Patil is an Indian politician who served as the 12th President of India from 2007 to 2012.</p>');
    });
    $("#fifthImg").click(function(){
      $('.content').html('<p>.Pranab Kumar Mukherjee  is the 13th and current President of India.</p>');
    });
});

.contentBox{
    width:50%;
    height:50%;
    border:2px solid black;
    margin-top:10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content"></div>

<img src="" alt="first image" id="firstImg">
<img src="" alt="second image" id="secondImg">
<img src="" alt="third image" id="thirdImg">
<img src="" alt="fourth image" id="fourthImg">
<img src="" alt="fifth image" id="fifthImg">

Answer 2

.appendTo（）将追加元素。您的所有文字将一个接一个地出现。

$（'＃content'）。html（'.. your html ..'）可能对您有所帮助，如果您只想显示单击哪个图像的文本。

这就是你想要的。

- 更新 -

如果您只需要在点击每张图片时更改内容div上的文字，可能会有以下情况更好。

<div id="content"></div>

<img src="" class="img" alt="image 1" data-text="text on image 1" />
<img src="" class="img" alt="image 2" data-text="text on image 2" />
.
.
.
<img src="" class="img" alt="image n" data-text="text on image n" />

<script>
$(document).ready(function(){
  $('.img').on('click', function(){
    $('#content').html($(this).data('text'));
  });
});
</script>

Answer 3

您需要动态生成img和p标记的数据ID

＆＃13;

$('img').each(function(n){
  $(this).attr('data-id',n);
}); //dynamically generating data attr
$('p').each(function(n){
  $(this).attr('data-id',n);
}); //dynamically generating data attr
$('p').hide();
$('img').on('click',function(){
    $('p').hide();
    $('p[data-id="'+$(this).data('id')+'"]').show();    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content"></div>

<img src="" alt="first image" >
<img src="" alt="second image">
<img src="" alt="third image" >
<img src="" alt="fourth image">
<img src="" alt="fifth image" >
<p>Content for Image 1</p>
<p>Content for Image 2</p>
<p>Content for Image 3</p>
<p>Content for Image 4</p>
<p>Content for Image 5</p>

＆＃13;

动态地向div添加内容

3 个答案: