Question

我正在向数据库添加一些记录，但我不喜欢我的方式，并希望为用户提供更方便的东西，更好。

我做的是：http://i.imgur.com/AYrPyCn.jpg

我想要的是：http://i.imgur.com/aKNBTtO.jpg

嗯，我想我知道如何创建div，从数据库和水平滚动条中创建所有图像，但我不知道的是，当我选择图像时，id将从我创建的输入中出现。

需要帮助。

我的代码：

<select name="id_artigo" id="attribute119">
<?php 
do {  
?>
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
</select>

<div id="editimg"><p><img src="images/artigos/1.png" id="main" /></p></div>

JS：

$('#attribute119').change(function () {
  $('#main').attr('src', 'images/artigos/' + $('#attribute119 :selected').text() + '.png');
});

Answer 1

您可以使用jQuery幻灯片插件，例如jcarousel或jssor。只需在“jQuery幻灯片”或“jQuery carousel”上进行谷歌搜索。

我建议你使用jcarousel。

鸭

Answer 2

由于您不希望它看起来像下拉列表，请将下拉列表替换为隐藏字段，该字段将包含所选项目的ID：
```
<input type="hidden" name="id_artigo" />
```
（用于测试，您可以使用type="text"代替）

为每张图片添加data-id-artigo属性：

<img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">

点击图片后，更新隐藏ID的值：

$('.artigo_img').on('click', function() {
    var idArtigo = $(this).data('idArtigo'); // get the artigo ID from the `data-` attribute
    $('[name="id_artigo"]').val(idArtigo);   // update the value of the hidden field
});

提交表单后，id_artigo将等于所选项目，就像之前一样。

Answer 3

我现在看到你只想选择1张图片，这个答案是选择多张图片。（未经测试，因此可能存在一些错误）

    <style>

.img_holder
{
    height:100px;
    clear:both;
}

.floating_img
{
    float:left;
    width:100px;
    height:100px;
}
.img_selected
{
  border:1px solid black;
}

</style>

<div class="img_holder">
<?php 

$img_id_arr = array();

do {  

$selected = true; //<--implement if they are selected

$selected_class = '';
if($selected)
    $img_id_arr[] = $row_artigos['id_artigo'];
    $selected_class = ' img_selected';
}

?>
<div class="floating_img<?php echo $selected_class; ?>" onclick="toggle_img(<?php echo $row_artigos['id_artigo']; ?>);"><img src="images/artigos/<?php echo $row_artigos['id_artigo']; ?>.png" id="main" /></div>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
<input typ="hidden" id="my_selected_images" name="my_selected_images" value="<?php echo implode(';',$img_id_arr); ?>">

<script>

function toggle_img(img_id)
{
    var selected_imgs = $('#my_selected_images').value;
    var img_arr = selected_imgs.split(";");
    var found = false;
    var new_arr = [];
    for (i = 0; i < img_arr.length; i++) { 
        if(img_id == img_arr[i])
        {
            found = true;
            //deselect img
        }
        else{
            //leave other item untouched
            new_arr.push(img_arr[i]);
        }
    }

    if(!found)
    {
        new_arr.push(img_id);
        //select img
    }

    $('#my_selected_images').value = new_arr.join(';');

}
</script>
</div>

创建自定义选定列表

3 个答案: