微件

配队模拟器：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
无编辑摘要
第1行： 第1行：
<script>
<script>
        // 找到被点击的角色卡片（最外层div）
    var modal = document.getElementById('character-list-modal');
        let target = e.target;
    var content = document.getElementById('character-list-content');
        while (target && target !== characterList) {
            if (target.style && target.style.position === 'relative' && target.style.width === '150px') {
                selectCharacter(target);
                break;
            }
            target = target.parentElement;
        }
    });
      
      
     function selectCharacter(characterCard) {
     // 如果还没有加载角色列表，则加载
        // 克隆角色卡片
    if (content.children.length === 0) {
        const clone = characterCard.cloneNode(true);
         content.innerHTML = '<div id="character-list-data"></div>';
       
         // 角色列表将通过下面的div加载
        // 提取角色名称
        const nameDiv = clone.querySelector('div[style*="bottom: 5px"]');
        const characterName = nameDiv ? nameDiv.textContent.trim() : '';
          
        // 清空character-slot并添加选中的角色
        characterSlot.innerHTML = '';
        characterSlot.style.border = '2px solid #28a745';
        characterSlot.appendChild(clone);
       
         // 存储选中的角色名称
        characterSlot.dataset.selectedCharacter = characterName;
       
        // 关闭弹窗
        characterModal.style.display = 'none';
     }
     }
})();
   
</script>
    modal.style.display = 'block';
}


<style>
function closeCharacterList() {
#character-modal button:hover {
    document.getElementById('character-list-modal').style.display = 'none';
    opacity: 0.8;
}
}


#character-list > div {
function selectCharacter(name) {
     cursor: pointer;
    var slot = document.getElementById('character-slot');
     transition: transform 0.2s;
    var placeholder = document.getElementById('character-placeholder');
    var selected = document.getElementById('character-selected');
   
    // 隐藏占位符
    placeholder.style.display = 'none';
   
    // 显示选中的角色
    selected.innerHTML = '<img src="/images/' + encodeURIComponent('战斗员图鉴_' + name + '.png') + '" width="150" />';
    selected.style.display = 'block';
   
    // 关闭弹窗
    closeCharacterList();
   
    // 移除点击事件，改为右键可以重新选择
     slot.onclick = null;
     slot.oncontextmenu = function(e) {
        e.preventDefault();
        placeholder.style.display = 'flex';
        selected.style.display = 'none';
        selected.innerHTML = '';
        slot.onclick = showCharacterList;
        slot.oncontextmenu = null;
    };
}
}


#character-list > div:hover {
// 点击模态框外部关闭
     transform: scale(1.05);
document.addEventListener('click', function(event) {
}
    var modal = document.getElementById('character-list-modal');
</style>
     if (event.target === modal) {
        closeCharacterList();
    }
});
</script>

2025年10月18日 (六) 21:02的版本

<script> 

   var modal = document.getElementById('character-list-modal');
   var content = document.getElementById('character-list-content');
   
   // 如果还没有加载角色列表，则加载
   if (content.children.length === 0) {

content.innerHTML = '

'; 

       // 角色列表将通过下面的div加载
   }
   
   modal.style.display = 'block';

}

function closeCharacterList() { 

   document.getElementById('character-list-modal').style.display = 'none';

}

function selectCharacter(name) { 

   var slot = document.getElementById('character-slot');
   var placeholder = document.getElementById('character-placeholder');
   var selected = document.getElementById('character-selected');
   
   // 隐藏占位符
   placeholder.style.display = 'none';
   
   // 显示选中的角色
   selected.innerHTML = '<img src="/images/' + encodeURIComponent('战斗员图鉴_' + name + '.png') + '" width="150" />';
   selected.style.display = 'block';
   
   // 关闭弹窗
   closeCharacterList();
   
   // 移除点击事件，改为右键可以重新选择
   slot.onclick = null;
   slot.oncontextmenu = function(e) {
       e.preventDefault();
       placeholder.style.display = 'flex';
       selected.style.display = 'none';
       selected.innerHTML = ;
       slot.onclick = showCharacterList;
       slot.oncontextmenu = null;
   };

}

// 点击模态框外部关闭 document.addEventListener('click', function(event) { 

   var modal = document.getElementById('character-list-modal');
   if (event.target === modal) {
       closeCharacterList();
   }

}); </script>

检索自“http://cznwiki.com/index.php?title=微件:配队模拟器&oldid=3416”