Question

我如何在每个盒子中放置独特的价值？

我将在下面放置一个链接。

例如：用户点击+，出现一个模态。
他从select中选择一个值并提交。
然后将所选值打印在用户在+上按下的框中。

https://codepen.io/anon/pen/rmbWdY

$(document).ready(function() { 
    $(".pat").append($("<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>")); 
    $result = $('#result p'); 
    $("#btnsubmit").click(function() { 
    $(".bl1 .glyphicon").hide(); 
    var text = $("#sel1 option:selected").text(); 
    $result.text(text); 
    }); 
    $("input[type='radio']").change(function() { 
    if ($(this).val() == 90) { 
     $result.removeClass('r45').addClass('r90'); 
    } else { 
     $result.removeClass('r90').addClass('r45'); 
    } 
    }); 
}); 
function readURL(event){ 
    var getImagePath = URL.createObjectURL(event.target.files[0]); 
    $('.bg').css('background-image', 'url(' + getImagePath + ')'); 
} 

Answer 1

我打一点点你的怪格。

要在每个框中有您必须删除选定的数字并将其替换为另一个数字。
Math功能很方便。
请注意，这个数字在这个解决方案中并不真正独特......它们是随机的。

然后，要将数字放在正确的框中，我添加了一个.glyphicon（+号）单击处理程序以获取元素引用。
在这个处理程序中，我创建了一个span来替换+符号...为了准备一个可以旋转的元素来接收选定的数字。

我在收音机选项中添加了“水平”...默认选中。

所以这里是代码：
CodePen

$(document).ready(function() { 

    var clickedPlus; 

    $(document).on("click",".glyphicon",function(){ 
    clickedPlus = $(this).closest("div"); 
    var newSpan = $("<span>"); 
    clickedPlus.html(newSpan); 
    }); 

    // When modal is close without submit 
    $(".close").on("click",function(){ 
    clickedPlus.html($("<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>")); 
    }); 

    $(".pat").append($("<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>")); 

    $result = $('#result p'); 

    $("#btnsubmit").click(function() { 
    $(".bl1 .glyphicon").hide(); 
    var text = $("#sel1 option:selected").text(); 
    $("#sel1 option:selected").text(Math.round(Math.random()*10000)); 
    //$result.text(text); 
    clickedPlus.find("span").text(text); 
    }); 

    $("input[type='radio']").change(function() { 
    if ($(this).val() == 90) { 
     //$result.removeClass('r45').addClass('r90'); 
     clickedPlus.find("span").removeClass('r45').addClass('r90'); 
    } else if ($(this).val() == 45) { 
     //$result.removeClass('r90').addClass('r45'); 
     clickedPlus.find("span").removeClass('r90').addClass('r45'); 
    } else{ 
     clickedPlus.find("span").removeClass('r90').removeClass('r45'); 
    } 
    }); 
}); // ready 


function readURL(event){ 
    var getImagePath = URL.createObjectURL(event.target.files[0]); 
    $('.bg').css('background-image', 'url(' + getImagePath + ')'); 
} 

Answer 2

获取元素位置的列表，并追加到该元素的值

$(document).ready(function() { 
    $(".pat").append($("<span class='glyphicon glyphicon-plus' ></span><span class='text'></span>"));//add a span with the class .text 
    $(".pat:not(.bl1)").click(function() { 
    var ind = $(this).index();//get the column position 
    var vind = $(this).parent().attr('class'); get the row class 

    $('#myModal').attr('data-ind', ind).attr('data-vind', vind).modal('show');//pass the values to the modal window 
    }) 
    $result = $('#result p'); 
    $("#btnsubmit").click(function() { 
    var ind = $(this).closest('.modal').attr('data-ind');//get the values 
    var vind = $(this).closest('.modal').attr('data-vind'); 

    var text = $("#sel1 option:selected").text(); 
    $result = $('.' + vind).find('.pat').eq(ind);//select the right element from the list 
    $result.find(".glyphicon").hide(); 
    $result.find('.text').text(text); 
    }); 
    $("input[type='radio']").change(function() { 
    var ind = $(this).closest(".modal").attr("data-ind"); 
    var vind = $(this).closest(".modal").attr("data-vind"); 
    $result = $("." + vind).find(".pat").eq(ind); 
    if ($(this).val() == 90) { 
     $result.find('.text').removeClass("r45").addClass("r90"); 
    } else { 
     $result.find('.text').removeClass("r90").addClass("r45"); 
    } 
    }); 

}); 

function readURL(event) { 
    var getImagePath = URL.createObjectURL(event.target.files[0]); 
    $('.bg').css('background-image', 'url(' + getImagePath + ')'); 
} 

演示：https://codepen.io/anon/pen/EmJZrY