콘테이너에 내용을 삽입하십시오

다음에 나는 이미지를위한 Google 검색과 같은 것을 재현하는 코드가 있습니다. 상자를 클릭하면 상자의 필드가 열립니다. 해당 정보 상자에 이미지와 제목 또는 단락을 어떻게 삽입합니까? 기본적으로 모든 상자는 u를 클릭하면 설명이 포함 된 고유 한 이미지를 갖기를 원합니다.콘테이너에 내용을 삽입하십시오

var container = $('.container'); 
 
var elements = container.children(); 
 
var oldWrapPos = 0; 
 

 
$('.box').click(function(){ 
 
    container.children().removeClass('selected'); // reset selected element 
 
    $(this).addClass('selected'); // mark new selected element 
 
    var selectedPos = $(this).index(); // get selected position 
 
    // find wrap element: 
 
    //var containerWidth = container.width(); 
 
    //var elementsInRow = Math.floor(containerWidth/100); 
 
    var elementsInRow = 4; // use this if container's width is fixed 
 
    var row = Math.floor(selectedPos/elementsInRow)+1; 
 
    var wrapPos = (row * elementsInRow); 
 
    
 
    // if selected is on last row, use as wrap the last element: 
 
    var size = elements.length; 
 
    if (wrapPos >= size){wrapPos = size;} 
 
    wrapPos = wrapPos - 1; 
 
    console.log(selectedPos); 
 
    console.log(elementsInRow); 
 
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110) 
 
    console.log(selectedPos % elementsInRow); 
 
    console.log((selectedPos % elementsInRow) * 110); 
 
    console.log('left: '+pointerPos); 
 
    console.log(size); 
 
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P 
 
    pointerPos = $(this).position().left + $(this).width()/2 - 10; 
 
    // end edit; 
 
    if (wrapPos == oldWrapPos){ 
 
     $('.info-pc').css("left", pointerPos+'px'); 
 
    } else { 
 
     oldWrapPos = wrapPos; 
 
     elements.removeClass('edge'); 
 
     $(elements[wrapPos]).addClass('edge'); 
 
     $('.info-bg').slideUp(function() { $(this).remove(); }); 
 
     $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:' 
 
         +pointerPos+'px"></div><div class="info-cl"></div></div>'); 
 
     $('.info-bg').slideDown(); 
 
    } 
 
}); 
 

 
$('html').click(function (e) { 
 
    if (e.target == this) 
 
     $('.info-bg').slideUp(function() { $(this).remove(); }); 
 
});

.container{ 
 
    width: 440px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.info-bg{ 
 
    width: 430px; 
 
    height: 70px; 
 
    background-color: red; 
 
    float:left; 
 
    position: relative; 
 
    margin: 5px; 
 
    display: none; 
 
} 
 

 
.info-cl{ 
 
    height: 100%; 
 
} 
 

 
.info-pc{ 
 
    position:absolute; 
 
\t border-bottom: 10px solid red; 
 
\t border-left: 10px solid transparent; 
 
\t border-right: 10px solid transparent; 
 
\t height: 0; 
 
\t width: 0; 
 
\t float: right; 
 
\t top: -10px; 
 
} 
 

 
.box{ 
 
    width:100px; 
 
    height:170px; 
 
    background-color: grey; 
 
    float:left; 
 
    margin:5px; 
 
    font-size: 40px; 
 
} 
 

 
.edge{ 
 
    background-color:yellow; 
 
} 
 

 
.selected { 
 
    background-color: red; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body> 
 
<div class="container"> 
 
    <div class="box">0</div> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
    <div class="box">6</div> 
 
    <div class="box">7</div> 
 
    <div class="box">8</div> 
 
    <div class="box">9</div> 
 
</div> 
 
</body>

출처

2017-12-19 A.S

dYou 다음 상자 당신의 HTML에 제목/설명에 대한 정보를 추가하고 거기에서 읽을 수 있습니다. 나는이 댓글 아래의 코드를 추가 : // 여기에 콘텐츠를 추가 도 유연한 모든 이미지는 것

var container = $('.container'); 
 
var elements = container.children(); 
 
var oldWrapPos = 0; 
 

 
$('.box').click(function(){ 
 
    container.children().removeClass('selected'); // reset selected element 
 
    $(this).addClass('selected'); // mark new selected element 
 
    var selectedPos = $(this).index(); // get selected position 
 
    // find wrap element: 
 
    //var containerWidth = container.width(); 
 
    //var elementsInRow = Math.floor(containerWidth/100); 
 
    var elementsInRow = 4; // use this if container's width is fixed 
 
    var row = Math.floor(selectedPos/elementsInRow)+1; 
 
    var wrapPos = (row * elementsInRow); 
 
    
 
    // if selected is on last row, use as wrap the last element: 
 
    var size = elements.length; 
 
    if (wrapPos >= size){wrapPos = size;} 
 
    wrapPos = wrapPos - 1; 
 
    console.log(selectedPos); 
 
    console.log(elementsInRow); 
 
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110) 
 
    console.log(selectedPos % elementsInRow); 
 
    console.log((selectedPos % elementsInRow) * 110); 
 
    console.log('left: '+pointerPos); 
 
    console.log(size); 
 
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P 
 
    pointerPos = $(this).position().left + $(this).width()/2 - 10; 
 
    // end edit; 
 
    if (wrapPos == oldWrapPos){ 
 
     $('.info-pc').css("left", pointerPos+'px'); 
 
    } else { 
 
     oldWrapPos = wrapPos; 
 
     elements.removeClass('edge'); 
 
     $(elements[wrapPos]).addClass('edge'); 
 
     $('.info-bg').slideUp(function() { $(this).remove(); }); 
 
     $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:' 
 
         +pointerPos+'px"></div><div class="info-cl"></div></div>'); 
 
     
 
     $('.info-bg').slideDown(); 
 
    } 
 
    //adding content here 
 
    var content = $('.info-bg').find('.info-cl'); 
 
    content.html(''); //empty previous content 
 
    var title = $('<h2>'); 
 
    title.text($(this).data('title')) 
 
    var description = $('<p>'); 
 
    description.text($(this).data('description')) 
 
    content.append(title).append(description); 
 
}); 
 

 
$('html').click(function (e) { 
 
    if (e.target == this) 
 
     $('.info-bg').slideUp(function() { $(this).remove(); }); 
 
});

.container{ 
 
    width: 440px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.info-bg{ 
 
    width: 430px; 
 
    min-height: 70px; 
 
    background-color: red; 
 
    float:left; 
 
    position: relative; 
 
    margin: 5px; 
 
    display: none; 
 
} 
 

 
.info-cl{ 
 
    height: 100%; 
 
} 
 

 
.info-pc{ 
 
    position:absolute; 
 
\t border-bottom: 10px solid red; 
 
\t border-left: 10px solid transparent; 
 
\t border-right: 10px solid transparent; 
 
\t height: 0; 
 
\t width: 0; 
 
\t float: right; 
 
\t top: -10px; 
 
} 
 

 
.box{ 
 
    width:100px; 
 
    height:170px; 
 
    background-color: grey; 
 
    float:left; 
 
    margin:5px; 
 
    font-size: 40px; 
 
} 
 

 
.edge{ 
 
    background-color:yellow; 
 
} 
 

 
.selected { 
 
    background-color: red; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body> 
 
<div class="container"> 
 
    <div class="box" data-title="foo0" data-description="bar">0</div> 
 
    <div class="box" data-title="foo1" data-description="bar">1</div> 
 
    <div class="box" data-title="foo2" data-description="bar">2</div> 
 
    <div class="box" data-title="foo3" data-description="bar">3</div> 
 
    <div class="box" data-title="foo4" data-description="bar">4</div> 
 
    <div class="box" data-title="foo5" data-description="bar">5</div> 
 
    <div class="box" data-title="foo6" data-description="bar">6</div> 
 
    <div class="box" data-title="foo7" data-description="bar">7</div> 
 
    <div class="box" data-title="foo8" data-description="bar">8</div> 
 
    <div class="box" data-title="foo9" data-description="bar">9</div> 
 
</div> 
 
</body>

출처

2017-12-19 11:25:47

그런 식으로 그것을 유지하기 위해 정보-BG가 최소 높이 OG의 높이를 변경 동일한 콘텐츠를 보유하고 있어야합니다. 모든 이미지에 대해 고유 한 제목과 설명이 필요합니다. –

나는 언급하지 않았다 : 그런 다음 상자의 html에 제목/설명에 대한 정보를 추가하고 거기에서 읽으십시오. –

내 편집을보고 원하는대로 데이터 제목 및 데이터 설명의 내용을 변경하십시오. –

콘테이너에 내용을 삽입하십시오

답변

관련 문제