Jquery 如何根据最大的输入[type="；number"；]值提取同级img元素

我有一个无序的列表，每个li元素都有一个图像和一个同级输入[type=“number”]（IMG-#），当单击按钮时，我试图将图像附加到具有最高数值val（）的同级输入中$（“#猜测检查”）

我的html代码如下所示

 <div id="checkedImageContainer" class="hidden col-md-4">
                <div class="text-center">
                    <h3 style="color:black"><strong>Now rate your favorite Images!!(#1-10)</strong></h3>
                    <ul class="checkedImageList">
<li><image src="pics/hammer.jpg" name="hammer"><input id="rateInput" type="number" value="1" min="1" max="10"><label id="RateButton">Rate</label></li>
<li><image src="pics/hardhat.jpg" name="hardhat"><input id="rateInput" type="number" value="1" min="1" max="10"><label id="RateButton">Rate</label></li>
<li><image src="pics/paintbrush.jpg" name="paintbrush"" name="hammer"><input id="rateInput" type="number" value="1" min="1" max="10"><label id="RateButton">Rate</label></li>
                    </ul>
                    <button id="guessCheck">That's MY Opini0n</button>
                </div>
<ul id="highestRated">
</ul>
</div>

现在为您喜爱的图片评分！！（#1-10）

比率
比率
您的代码中有一些错误：


ID必须是唯一的。把他们换成班级
选择器按属性必须更改为[type='number']
正确地打开和关闭字符串
对地图结果进行排序
您需要prev

不要在事件处理程序中添加事件处理程序
正确委派活动

更新的小提琴是


var maxCheckedNum=3；
$（文档）.ready（函数（）{
//确保您的用户在2000年之前出生
//确认后，可以删除隐藏的类
$（“#生日”）。在（'click'，函数（e）上{
让userAge=$（'#usersInput'）.val（）；
如果（userAge.trim（）=''）{
返回；
}
如果（+userAge=maxCheckedNum）；
/*
这句话没用
$（'div>p'）.attr（'id'，'highlight'）；
让userAgesLog=[]；
userAgesLog.push（+userAge）；
*/
}
如果（+userAge>=2000），则为else{
提醒（“您不符合玩此游戏的年龄要求”）
}
});
//仅允许用户检查3个型号
$（“#imageninputlist输入[type=checkbox]”）。在（'change'，函数（e）上{
$（“输入[类型=复选框]：未（：选中）”）.attr（“已禁用）”，$（“输入[类型=复选框]：选中”）.length>=maxCheckedNum）；
})
//单击确认按钮时，将选中的图像推到第二个div
$（“#确认”）。在（'click'，函数（e）{
$（'checkedImageContainer'）。removeClass（'hidden'）；
$（“#第三条规则”）.removeClass（'hidden'）；
$（this.prop（'disabled'，true）；
$（'#imageninputlist输入[type=“checkbox”]：checked'）。每个（函数（idx，ele）{
$（'.checkedImageList'）。追加（'
'+
‘利率
’）；
});
});
//当输入编号更改时，循环其他输入并禁止它们与“此输入”的值相同
//
//父级上的委托事件
//
$（'.container'）。在（'input'，'checkedImageContainer input[type=number]'上，函数（e）{
if（$（'#checkedImageContainer input[type=number]'）.not（this）.map（函数（）{
返回$（this.val（）；
}).get（）.indexOf（$（this.val（））>=0）{
$（this.val）（this.dataset.oldValue）；
}否则{
this.dataset.oldValue=this.value；
}
});
$（'#猜测检查'）。在（'click'，函数（）{
//
//选择正确的输入
//
让highestRating=$（'#checkedImageContainer输入[type=number]'）。映射（函数（）{
返回{ele:$（this），val:parseFloat（this.value）}；
}).get（）.sort（函数（a，b）{
返回b.val-a.val；
})[0].ele；
$（“#猜测图像容器”）.removeClass（'hidden'）；
log（#highestrated列表上删除的隐藏类）；
$（“#猜测图像容器”）。追加（“
完成”按钮现在猜测图像的名称“
”；
});
});
#确认，#猜测检查{
宽度：110px；
背景色：#990000；
颜色：白色；
左边距：40px；
边界半径：20%
}
#完成按钮{
宽度：110px；
背景色：#990000；
颜色：白色；
左边距：120像素；
边缘顶部：33像素边界半径：20%
}
#图像识别器{
背景色：#f7f9f9；
}
#检查图像容器{
背景色：#c0f9f9；
}
#猜测图像容器{
背景色：#014747
}
.检查图像列表>img{
宽度：200px；
高度：200px；
}
.隐藏{
显示：无；
}
h1{
字体大小：22px；
}
#老年人{
背景色：#0d7272；
高度：200px；
}
img{
宽度：100px；
高度：50px；
}
保险商实验室{
列表样式：无；
}
ul>li{
垫底：7px；
}
#规则专家{
字号：17px；
}
#游戏规则{
背景色：#af9607；
颜色：白色；
}
.税率输入{
颜色：黑色；
}
#第三条规则{
颜色：黑色
}
.税率选择{
颜色：黑色；
}
#猜我的值{
颜色：黑色
}

让我们确保你玩这个游戏很好，输入你的生日：
进入年龄
好的，让我们开始吧，下面是规则…

选择您喜爱的图像
您只能选择三个

现在为您喜爱的图像评分。（不要
给两张图片相同的评级！！）












$('#guessCheck').on('click', function(){

let highestRating = $("input[type='number']").map(function() {
     return {ele: $(this), val: parseFloat(this.value)};
 }).get().sort((a,b) => {return b.val - a.val;})[0].ele;
 $('#guessImageContainer').removeClass('hidden');
 console.log('removed hidden class on the #highestrated list');
 $('#guessImageContainer').append('<li><img src="' + highestRating.closest('img').attr('src') + '"><input id="guessMyValue" type="text"><button class="text-center" id="finishButton">Finish_Button</button><h2 class="text-center">Now Guess The Name Of The image</h2></li>');