Img Src Или data-imgsrc Coldfusion

То, что я пытаюсь сделать, это отображать изображение на основе щелчка по кнопке. Пока это то, что у меня есть. Я тоже натолкнулся на что-то. http://rvera.github.io/image-picker/Img Src Или data-imgsrc Coldfusion

Моя проблема заключается в том, что я нажимаю первую кнопку, и появляется первое изображение в базе данных, но вы не можете получить изображения других изображений. Я также использовал функцию ORDER BY, чтобы проверить, что другие фотографии работают, и они это делают. Поэтому он кажется застрявшим на первой фотографии в базе данных или сначала после сортировки. enter image description here

<!DOCTYPE html> 
<html> 
<head> 
    <cfquery datasource="AccessTest" name="qTest"> 
     SELECT Account, Image, Image_ID 
     FROM PictureDB 
    </cfquery> 
    <script src="http://code.jquery.com/jquery-2.0.3.js"> 

    </script> 
    <script> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
       $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     <h2> 
      Display Image 
     </h2> 
    </div> 
    <cfloop query="qTest"> 
     <button> 
     <cfoutput> 
       <tr> 
        <td> 
         #qTest.Account# 
        </td> 

       </tr> 
      </cfoutput> 
     </button> 
    </cfloop> 
</body>

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
    <cfquery datasource="AccessTest" name="qTest"> 
     SELECT Account, Image, Image_ID 
     FROM PictureDB 
    </cfquery> 
    <script src="http://code.jquery.com/jquery-2.0.3.js"> 

    </script> 
    <script> 
     $(document).ready(function(){ 
      var _img = []; 
      <cfoutput query="qTest"> 
       _img.push({'id': '#qTest.Image_ID#', 'src': '#qTest.Image#'}); 
      </cfoutput> 
      console.log(_img); 
     }); 


         $("button").on('click', function(){ 
       var _id = $(this).data('image-id'); 
       console.log('Image ID: ' + _id + '.'); 
       // Find the corrosponding object in the _img array. 
       var result = $.grep(_img, function(e){ return e.id === _id }); 
       // If only one is found, then reference the image src from the matching object. 
       if (result.length === 1) { 
        console.log(result[0].src); 
        $("#div1").html('<img src="' + result[0].src + '">'); 
       } else { 
        // If none or more than one are found, show a warning. 
        console.warn('Could not find image ' + _id + '.'); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     <h2> 
      Display Image 
     </h2> 
    </div> 
    <cfoutput query="qTest"> 
     <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#"> 
      #qTest.Account# 
     </button> 
    </cfoutput> 
</body>

источник

2013-12-20 Michael Downey

Прежде всего, <button><tr><td>Something</td></tr></button> не действует наценка. Вы должны просто вывести теги кнопок, возможно, с <br> после каждого из них.

Во-вторых, вы правильно пересматриваете список учетных записей, используя <cfloop>. Тем не менее, вы передаете только данные первой записи в раздел JavaScript. Таким образом, каждая нажатая кнопка может отображать только одно и то же изображение большего размера.

Для того, чтобы сделать то, что вы хотите, вы можете динамически генерировать массив JavaScript с использованием данных запроса, а затем использовать кнопку data-imageID на кнопке, чтобы отобразить кнопку щелчка на правильное изображение из массива. Затем вы будете вытаскивать данные записи на клиентской стороне с помощью функции jQuery и заполнять div1.

2013-12-24: Давайте начнем с самого верха.

У вас есть этот запрос:

<cfquery datasource="AccessTest" name="qTest"> 
    SELECT Account, Image, Image_ID 
    FROM PictureDB 
</cfquery>

у вас есть цель DIV:

<div id="div1"> 
<h2>Display Image</h2> 
</div>

Вы динамически создавать кнопки HTML с помощью CFML:

<cfloop query="qTest"> 
<button>#qTest.Account#</button> 
</cfloop>

Наконец, у вас есть это JavaScript, чтобы назначить действие для события click на каждой кнопке.

<script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">'); 
     }); 
    }); 
</script>

Я создал this JSFiddle, чтобы показать, что результирующий HTML будет выглядеть (с использованием изображений с моего сайта).

Окончательный вывод:

<script> 
$(document).ready(function(){ 
    $("button").on('click', function(){ 
     $("#div1").html('<img src="http://iknowkungfoo.com/static/icons/32/linkedin.png">'); 
    }); 
}); 
</script> 

<div id="div1"> 
    <h2>Display Image</h2> 
</div> 

<button>Linked In</button> 
<button>Facebook</button> 
<button>Twitter</button>

Каждая кнопка в документе может только когда-либо иметь один и тот же образ, возложенные на него.

Динамически создать на стороне клиента JavaScript с использованием CFML

запроса и цели DIV остаются теми же, но давайте обновим HTML вы собираетесь создать.

Для каждой кнопки требуется уникальный идентификатор DOM. Сделайте это, используя Image_ID как часть значения. Используйте атрибут данных HTML5 для хранения искажающего Image_ID для каждой кнопки.

<cfoutput query="qTest"> 
    <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">#qTest.Account#</button> 
</cfoutput>

Вывод должен выглядеть следующим образом:

<button id="account_1" data-image-id="1">Linked In</button> 
<button id="account_2" data-image-id="2">Facebook</button> 
<button id="account_3" data-image-id="3">Twitter</button>

Теперь нам нужен массив JavaScript объектов, которые будут содержать данные запроса в клиентском коде.

$(document).ready(function(){ 
    var _img = []; 
    <cfoutput query="qTest"> 
     _img.push({'id': #qTest.Image_ID#, 'src': '#qTest.Image#'}); 
    </cfoutput> 
    console.log(_img); 
});

Это в конечном итоге выглядит так:

$(document).ready(function(){ 
    var _img = []; 
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'}); 
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'}); 
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'}); 
    console.log(_img); 
});

Теперь мы можем связать все это вместе

назначая щелчка обработчик <button>s,
который использует значение, если атрибут data- равен
find the correct object from the JavaScript array
и отобразить правильное изображение в цель DIV.

$(document).ready(function(){ 
    var _img = []; 
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'}); 
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'}); 
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'}); 
    console.log(_img); 

    $("button").on('click', function(){ 
     var _id = $(this).data('image-id'); 
     console.log('Image ID: ' + _id + '.'); 
     // Find the corrosponding object in the _img array. 
     var result = $.grep(_img, function(e){ return e.id === _id }); 
     // If only one is found, then reference the image src from the matching object. 
     if (result.length === 1) { 
      console.log(result[0].src); 
      $("#div1").html('<img src="' + result[0].src + '">'); 
     } else { 
      // If none or more than one are found, show a warning. 
      console.warn('Could not find image ' + _id + '.'); 
     } 
    }); 

});

This can be seen in action here.

источник

2013-12-20 23:29:40

«Для того, чтобы делать то, что вы хотите, вы можете динамически генерировать массив JavaScript с использованием данных запроса, а затем использовать атрибут данных ImageID на кнопку, чтобы отобразить щелкнул кнопку для правильное изображение из массива. Затем вы будете вытаскивать данные записи на клиентской стороне, используя вашу функцию jQuery и заполнять div1 «...... Не совсем точно, как это сделать. –

Прокрутите запрос и создайте массив JS. @iKnowKungFoo ответил правильно. Ваш обработчик кликов ссылается только на первую строку запроса, чтобы это было единственное изображение, которое когда-либо показывалось. Вы назначаете один и тот же обработчик кликов всем кнопкам и ожидаете, что они будут вести себя по-разному. Он также прав, что ваша разметка HTML неверна. Я предлагаю вам сначала изучить основы HTML & JS, прежде чем продолжить. Это поможет вам лучше понять вашу проблему. –

Обновлено с полной прогулкой. –

Img Src Или data-imgsrc Coldfusion

ответ

Смежные вопросы