从库中选择一个图像并向其添加类并将其保存到数据库

Question

我想从多个图像中选择一个图像，向其中添加一个选定的类，然后将该图像ID或名称保存到我的数据库中。图像是使用php动态生成的。

我想：

当用户点击复选标记时，应选择
1. 图像。
2. 按用户
将所选类别（绿色复选框）添加到所选图像
3. 只能选择1张图片
4. 单击“保存”按钮时，将选定的图像ID或名称添加到数据库



<div class="gallery_grid uk-grid-width-medium-1-4 uk-grid-width-large-1-5" data-uk-grid="{gutter: 16}">
    <div class="uk-width-medium-3-10">
        <div>
            <div class="md-card md-card-hover">
                <div class="gallery_grid_item md-card-content">
                    <div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top">&#8377; 455.00
                    </div>
                    <div class="uk-badge uk-badge-success uk-position-absolute uk-position-top-right uk-margin-right uk-margin-top">
                        <i class="material-icons">&#xE86C;</i>
                    </div>
                    <img src="assets/img/gallery/Image01.jpg" alt="">                            
                    <div class="gallery_grid_image_caption">
                        <div class="gallery_grid_image_menu">
                            <i class="md-icon material-icons">&#xE876;</i>
                        </div>
                        <span class="gallery_image_title">In quia eos veniam aperiam ut.</span>
                        <span class="uk-text-muted uk-text-small">23 Jun 2016, 64KB</span>
                    </div>
                </div>
            </div>
        </div>                
    </div>
    <div class="uk-width-medium-3-10">
        <div>
            <div class="md-card md-card-hover">
                <div class="gallery_grid_item md-card-content">
                    <div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top">&#8377; 455.00
                    </div>
                    <img src="assets/img/gallery/Image01.jpg" alt="">                            
                    <div class="gallery_grid_image_caption">
                        <div class="gallery_grid_image_menu">
                            <i class="md-icon material-icons">&#xE876;</i>
                        </div>
                        <span class="gallery_image_title">In quia eos veniam aperiam ut.</span>
                        <span class="uk-text-muted uk-text-small">23 Jun 2016, 64KB</span>
                    </div>
                </div>
            </div>
        </div>                
    </div>
    <div class="uk-width-medium-3-10">
        <div>
            <div class="md-card md-card-hover">
                <div class="gallery_grid_item md-card-content">
                    <div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top">&#8377; 455.00
                    </div>                        
                    <img src="assets/img/gallery/Image01.jpg" alt="">                            
                    <div class="gallery_grid_image_caption">
                        <div class="gallery_grid_image_menu" data-uk-dropdown="{pos:'top-right'}">
                            <i class="md-icon material-icons">&#xE876;</i>
                        </div>
                        <span class="gallery_image_title">In quia eos veniam aperiam ut.</span>
                        <span class="uk-text-muted uk-text-small">23 Jun 2016, 64KB</span>
                    </div>
                </div>
            </div>
        </div>                
    </div>
</div>

Answer 1

以下是示例https://jsfiddle.net/o5sb7wLq/

example.html的

<Button Command="{Binding Path=DataContext.DeleteTimeTableCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}" />

example.js

<div class="container">
<img id='1' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
<img id='2' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
<img id='3' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>